--- name: tailwind-utilities-reference description: Complete Tailwind CSS utilities reference. Use when searching for utility classes, responsive variants, or Tailwind configuration patterns. --- # Tailwind CSS Utilities Reference A comprehensive reference guide for Tailwind CSS utility classes, patterns, and configurations. This skill provides quick access to all Tailwind utilities, responsive design patterns, custom configurations, and best practices. ## Table of Contents 1. [Layout Utilities](#layout-utilities) 2. [Flexbox & Grid](#flexbox--grid) 3. [Spacing (Padding & Margin)](#spacing-padding--margin) 4. [Sizing](#sizing) 5. [Typography](#typography) 6. [Backgrounds](#backgrounds) 7. [Borders](#borders) 8. [Effects & Filters](#effects--filters) 9. [Transitions & Animations](#transitions--animations) 10. [Transforms](#transforms) 11. [Interactivity](#interactivity) 12. [Responsive Design Patterns](#responsive-design-patterns) 13. [Custom Configuration](#custom-configuration) 14. [Plugin Development](#plugin-development) 15. [Component Recipes](#component-recipes) 16. [JIT Mode Patterns](#jit-mode-patterns) 17. [Performance Optimization](#performance-optimization) 18. [Searchable Class Index](#searchable-class-index) --- ## Layout Utilities ### Container ```html

``` ### Display ```html

Block

Inline Block

Inline

Flex

Inline Flex

Grid

Inline Grid

Table

Responsive display changes

``` ### Position ```html

Static

Relative

Absolute

Fixed

Sticky Header

All sides 0

Left and right 0

Top and bottom 0

Specific positioning

Negative positioning

``` ### Overflow ```html

Auto scrollbars

Hidden overflow

Visible overflow

Always scrollbars

Horizontal scroll only

Truncated text with ellipsis

Ellipsis

Clipped

``` ### Z-Index ```html

Base layer

Layer 10

Layer 20

Layer 30

Layer 40

Layer 50

Auto

Negative layer

Custom z-index 100

Custom z-index 999

``` ### Object Fit & Position ```html

``` --- ## Flexbox & Grid ### Flexbox Container ```html

Item 1

Item 2

Row (default)

Row reverse

Column

Column reverse

Wrap

Wrap reverse

No wrap

Start

End

Center

Space between

Space around

Space evenly

Start

End

Center

Baseline

Stretch

Start

End

Center

Between

Around

Evenly

``` ### Flexbox Items ```html

Grow and shrink

Auto

Initial

No grow/shrink

Grow

No grow

Shrink

No shrink

Order 1

Order 2

First (-9999)

Last (9999)

Auto

Start

End

Center

Stretch

Baseline

``` ### Grid Container ```html

1 column

2 columns

3 columns

4 columns

5 columns

6 columns

12 columns

None

Custom columns

Responsive auto-fit grid

1 row

2 rows

3 rows

None

No gap

0.25rem gap

0.5rem gap

1rem gap

2rem gap

Different x/y gaps

Row flow

Column flow

Row dense

Column dense

Auto

Min

Max

``` ### Grid Items ```html

Span 1 column

Span 2 columns

Span all columns

Auto

Start at column 1

Column 2 to 4

End at column 3

Span 1 row

Span 2 rows

Span all rows

Start at row 1

Row 2 to 4

Auto

Start

End

Center

Stretch

Justify center

Align center

``` --- ## Spacing (Padding & Margin) ### Spacing Scale ``` 0 = 0px px = 1px 0.5 = 0.125rem (2px) 1 = 0.25rem (4px) 1.5 = 0.375rem (6px) 2 = 0.5rem (8px) 2.5 = 0.625rem (10px) 3 = 0.75rem (12px) 3.5 = 0.875rem (14px) 4 = 1rem (16px) 5 = 1.25rem (20px) 6 = 1.5rem (24px) 7 = 1.75rem (28px) 8 = 2rem (32px) 9 = 2.25rem (36px) 10 = 2.5rem (40px) 11 = 2.75rem (44px) 12 = 3rem (48px) 14 = 3.5rem (56px) 16 = 4rem (64px) 20 = 5rem (80px) 24 = 6rem (96px) 28 = 7rem (112px) 32 = 8rem (128px) 36 = 9rem (144px) 40 = 10rem (160px) 44 = 11rem (176px) 48 = 12rem (192px) 52 = 13rem (208px) 56 = 14rem (224px) 60 = 15rem (240px) 64 = 16rem (256px) 72 = 18rem (288px) 80 = 20rem (320px) 96 = 24rem (384px) ``` ### Padding ```html

No padding

1rem padding all sides

2rem padding all sides

1rem horizontal padding

1rem vertical padding

Padding top

Padding right

Padding bottom

Padding left

Different horizontal/vertical

Custom each side

Custom padding 17px

Custom values

``` ### Margin ```html

No margin

1rem margin all sides

Auto margin (centering)

1rem horizontal margin

Center horizontally

1rem vertical margin

Margin top

Margin right

Margin bottom

Margin left

Negative margin all sides

Negative margin top

Negative horizontal margin

Custom margin 13px

Custom margin top

``` ### Space Between ```html

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Reversed direction

``` --- ## Sizing ### Width ```html

1px

0.125rem

0.25rem

100%

100vw

50%

33.333%

66.667%

25%

75%

20%

16.667%

8.333%

Auto

Fit content

Min content

Max content

350px width

Calculated width

``` ### Min-Width ```html

100%

Min content

Max content

Fit content

Custom min-width

``` ### Max-Width ```html

20rem (320px)

24rem (384px)

28rem (448px)

32rem (512px)

36rem (576px)

42rem (672px)

48rem (768px)

56rem (896px)

64rem (1024px)

72rem (1152px)

80rem (1280px)

None

100%

640px

768px

1024px

1280px

1536px

65ch

``` ### Height ```html

100%

100vh

Auto

50%

33.333%

66.667%

100vh

50vh

Dynamic viewport height

``` ### Min-Height ```html

100%

100vh

Fit content

Custom min-height

``` ### Max-Height ```html

100%

100vh

None

Custom max-height

``` --- ## Typography ### Font Family ```html

Sans-serif font

Serif font

Monospace font

Custom heading font

Custom body font

``` ### Font Size ```html

0.75rem (12px)

0.875rem (14px)

1rem (16px)

1.125rem (18px)

1.25rem (20px)

1.5rem (24px)

1.875rem (30px)

2.25rem (36px)

3rem (48px)

3.75rem (60px)

4.5rem (72px)

6rem (96px)

8rem (128px)

Custom 17px

Fluid typography

``` ### Font Weight ```html

100

200

300

400

500

600

700

800

900

``` ### Font Style ```html

Italic text

Not italic

``` ### Font Variant Numeric ```html

Normal numbers

Ordinal numbers

Slashed zero

Lining numbers

Oldstyle numbers

Proportional

Tabular numbers

Diagonal fractions

Stacked fractions

``` ### Line Height ```html

1.25

1.375

1.5

1.625

0.75rem

1rem

1.25rem

2.5rem

``` ### Letter Spacing ```html

-0.05em

-0.025em

0em

0.025em

0.05em

0.1em

``` ### Text Alignment ```html

Left aligned

Center aligned

Right aligned

Justified

Start (LTR: left, RTL: right)

End (LTR: right, RTL: left)

``` ### Text Color ```html

Lightest

...

Medium

Darkest

Extra dark

Black

White

Transparent

Current color

Inherit

Custom hex

RGB

``` ### Text Decoration ```html

Underlined

Overlined

Strike through

No decoration

Solid line

Double line

Dotted line

Dashed line

Wavy line

Blue underline

1px thick

2px thick

4px thick

8px thick

Offset 1px

Offset 4px

Offset 8px

``` ### Text Transform ```html

UPPERCASE TEXT

lowercase text

Capitalize Each Word

Normal case

``` ### Text Overflow ```html

Truncate with ellipsis...

Ellipsis

Clip

``` ### Vertical Alignment ```html Baseline Top Middle Bottom Text top Text bottom Subscript Superscript ``` ### Whitespace & Word Break ```html

Normal

No wrap

Preserve whitespace

Preserve line breaks

Preserve and wrap

Normal break

Break words

Break all

No hyphens

Manual hyphens

Auto hyphens

``` ### Text Indent ```html

No indent

1rem indent

2rem indent

Hanging indent

``` --- ## Backgrounds ### Background Color ```html

Lightest

Medium

Darkest

Transparent

Current color

Inherit

Custom hex

RGB

HSL

``` ### Background Opacity ```html

25%

50%

75%

100%

50% opacity on entire element

50% opacity (Tailwind 3+)

37% opacity

``` ### Background Image ```html

To top

To top right

To right

To bottom right

To bottom

To bottom left

To left

To top left

Three color gradient

Two color gradient

Custom color stops

No background image

Background image

``` ### Background Position ```html

Bottom

Center

Left

Left bottom

Left top

Right

Right bottom

Right top

Top

``` ### Background Size ```html

Auto

Cover

Contain

Custom size

``` ### Background Repeat ```html

Repeat

No repeat

Repeat horizontally

Repeat vertically

Round

Space

``` ### Background Attachment ```html

Fixed

Local

Scroll

``` ### Background Clip ```html

Clip to border

Clip to padding

Clip to content

Clip to text

Gradient Text

``` ### Background Origin ```html

Border box

Padding box

Content box

``` --- ## Borders ### Border Width ```html

1px all sides

No border

2px all sides

4px all sides

8px all sides

Top

Right

Bottom

Left

Horizontal

Vertical

Different widths each side

``` ### Border Color ```html

Border color

Blue border

Transparent

Current color

Different colors

50% opacity

``` ### Border Style ```html

Solid

Dashed

Dotted

Double

Hidden

None

``` ### Border Radius ```html

0.125rem

0.25rem

0.375rem

0.5rem

0.75rem

1rem

1.5rem

9999px (pill/circle)

Top corners

Right corners

Bottom corners

Left corners

Top left

Top right

Bottom right

Bottom left

Custom 12px

Diagonal rounded corners

``` ### Divide (Between Elements) ```html

Item 1

Item 2

Item 3

Col 1

Col 2

Col 3

Thicker divider

Gray dividers

Dashed dividers

50% opacity dividers

Reversed with dividers

``` ### Outline ```html ``` ### Ring (Focus Rings) ```html Default ring No ring 1px ring 2px ring 4px ring Blue ring 50% opacity No offset 2px offset 4px offset White offset Inset ring Focus ring on interaction ``` --- ## Effects & Filters ### Box Shadow ```html

Small shadow

Default shadow

Medium shadow

Large shadow

Extra large shadow

2XL shadow

Inner shadow

No shadow

Custom shadow

Blue shadow

``` ### Drop Shadow (Filter) ```html

Small drop shadow

Default drop shadow

Medium drop shadow

Large drop shadow

XL drop shadow

2XL drop shadow

No drop shadow

Custom drop shadow

``` ### Opacity ```html

0% (invisible)

10%

25%

50%

75%

90%

100% (opaque)

37%

``` ### Mix Blend Mode ```html

Normal

Multiply

Screen

Overlay

Darken

Lighten

Color dodge

Color burn

Hard light

Soft light

Difference

Exclusion

Hue

Saturation

Color

Luminosity

``` ### Background Blend Mode ```html

Normal

Multiply

Screen

Overlay

``` ### Filters ```html

No blur

Small blur (4px)

Default blur (8px)

Medium blur (12px)

Large blur (16px)

XL blur (24px)

2XL blur (40px)

3XL blur (64px)

0 (black)

50%

100% (normal)

150%

200%

50%

100% (normal)

150%

200%

No grayscale

Full grayscale

0deg

15deg

30deg

60deg

90deg

180deg

No invert

Full invert

50%

100% (normal)

150%

200%

No sepia

Full sepia

Backdrop blur

Backdrop brightness

Backdrop contrast

Backdrop grayscale

Backdrop hue rotate

Backdrop invert

Backdrop opacity

Backdrop saturate

Backdrop sepia

``` --- ## Transitions & Animations ### Transition Property ```html

No transition

All properties

Common properties

Colors only

Opacity only

Shadow only

Transform only

Custom properties

``` ### Transition Duration ```html

75ms

100ms

150ms

200ms

300ms

500ms

700ms

1000ms (1s)

2 seconds

``` ### Transition Timing Function ```html

Linear

Ease in

Ease out

Ease in-out

Custom cubic-bezier

``` ### Transition Delay ```html

75ms delay

100ms delay

150ms delay

200ms delay

300ms delay

500ms delay

700ms delay

1000ms delay

``` ### Animation ```html

No animation

Spinning (loading spinner)

Pinging (notification dot)

Pulsing (skeleton loader)

Bouncing

``` --- ## Transforms ### Scale ```html

50%

75%

90%

95%

100% (normal)

105%

110%

125%

150%

50% width

150% width

50% height

150% height

170%

``` ### Rotate ```html

0deg

1deg

3deg

6deg

12deg

45deg

90deg

180deg

-45deg

-90deg

17deg

``` ### Translate ```html

1rem right

50% right

100% right

1rem left

50% left

1rem down

50% down

100% down

1rem up

50% up

13px right

Perfect center

``` ### Skew ```html

0deg

3deg

6deg

12deg

-12deg

0deg

3deg

6deg

12deg

-12deg

``` ### Transform Origin ```html

Center (default)

Top

Top right

Right

Bottom right

Bottom

Bottom left

Left

Top left

Custom origin

``` ### Combined Transforms ```html

Combined transforms

Hover me

``` --- ## Interactivity ### Cursor ```html

Auto

Default

Pointer (hand)

Wait

Text (I-beam)

Move

Help

Not allowed

None

Progress

Cell

Crosshair

Vertical text

Alias

Copy

No drop

Grab

Grabbing

Column resize

Row resize

North resize

East resize

South resize

West resize

NE resize

NW resize

SE resize

SW resize

EW resize

NS resize

Custom cursor

``` ### Pointer Events ```html

No pointer events

Auto pointer events

``` ### Resize ```html ``` ### Scroll Behavior ```html

Auto scroll

``` ### Scroll Snap ```html

No snap

Snap horizontally

Snap vertically

Snap both

Mandatory snap

Proximity snap

Snap to start

Snap to end

Snap to center

No snap align

Slide 1

Slide 2

Slide 3

``` ### Touch Action ```html

Auto

None

Pan X

Pan left

Pan right

Pan Y

Pan up

Pan down

Pinch zoom

Manipulation

``` ### User Select ```html

Not selectable

Selectable text

Select all on click

Auto

``` ### Will Change ```html

Auto

Scroll

Contents

Transform

``` ### Appearance ```html ``` ### Accent Color ```html ``` ### Caret Color ```html ``` --- ## Responsive Design Patterns ### Breakpoints ``` sm = 640px (min-width) md = 768px (min-width) lg = 1024px (min-width) xl = 1280px (min-width) 2xl = 1536px (min-width) ``` ### Mobile-First Responsive Design ```html

Responsive text sizing

Increasing padding on larger screens

Only visible on mobile

Hidden on mobile, visible on md+

Only visible on large screens

``` ### Responsive Layout Patterns #### Stack to Row ```html

Column 1

Column 2

``` #### Responsive Grid ```html

Item 1

Item 2

Item 3

Item 4

``` #### Sidebar Layout ```html

Main content

``` #### Card Grid ```html

Card 1

Card 2

Card 3

``` #### Container with Max Width ```html

Centered content with responsive padding

``` ### Responsive Typography ```html

Large Heading

Medium Heading

Body text with responsive sizing and line height

``` ### Responsive Images ```html

``` ### Advanced Responsive Patterns ```html

Cards

Logo

Items with different spacing on mobile vs desktop

Video or image container

``` --- ## Custom Configuration ### Extending the Theme (tailwind.config.js) ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { // Custom colors colors: { primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49', }, secondary: '#8b5cf6', accent: { light: '#fbbf24', DEFAULT: '#f59e0b', dark: '#d97706', }, }, // Custom spacing spacing: { '128': '32rem', '144': '36rem', }, // Custom font families fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], serif: ['Merriweather', 'Georgia', 'serif'], mono: ['Fira Code', 'monospace'], display: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'], }, // Custom font sizes fontSize: { '2xs': '0.625rem', '3xl': '2rem', '4xl': '2.5rem', '5xl': '3rem', }, // Custom breakpoints screens: { 'xs': '475px', '3xl': '1920px', }, // Custom border radius borderRadius: { '4xl': '2rem', '5xl': '3rem', }, // Custom z-index zIndex: { '60': '60', '70': '70', '80': '80', '90': '90', '100': '100', }, // Custom animations keyframes: { 'fade-in': { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, 'fade-out': { '0%': { opacity: '1' }, '100%': { opacity: '0' }, }, 'slide-in': { '0%': { transform: 'translateX(-100%)' }, '100%': { transform: 'translateX(0)' }, }, 'slide-out': { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(100%)' }, }, 'scale-in': { '0%': { transform: 'scale(0.9)', opacity: '0' }, '100%': { transform: 'scale(1)', opacity: '1' }, }, wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' }, }, }, animation: { 'fade-in': 'fade-in 0.3s ease-in-out', 'fade-out': 'fade-out 0.3s ease-in-out', 'slide-in': 'slide-in 0.3s ease-out', 'slide-out': 'slide-out 0.3s ease-out', 'scale-in': 'scale-in 0.2s ease-out', 'wiggle': 'wiggle 1s ease-in-out infinite', }, // Custom box shadows boxShadow: { 'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.1)', '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', 'glow': '0 0 20px rgba(59, 130, 246, 0.5)', }, // Custom gradients (use with bg-gradient-to-*) backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 'hero-pattern': "url('/img/hero-pattern.svg')", }, // Custom aspect ratios aspectRatio: { '4/3': '4 / 3', '21/9': '21 / 9', }, // Custom transitions transitionProperty: { 'height': 'height', 'spacing': 'margin, padding', }, // Custom min/max widths minWidth: { '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', }, maxWidth: { '8xl': '88rem', '9xl': '96rem', }, // Custom line heights lineHeight: { 'extra-loose': '2.5', '12': '3rem', }, // Custom letter spacing letterSpacing: { 'extra-wide': '0.15em', }, }, }, plugins: [], } ``` ### Using CSS Variables with Tailwind ```javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { primary: 'rgb(var(--color-primary) / )', secondary: 'rgb(var(--color-secondary) / )', }, }, }, } ``` ```css /* globals.css */ :root { --color-primary: 59 130 246; /* RGB values for blue-500 */ --color-secondary: 139 92 246; /* RGB values for purple-500 */ } [data-theme="dark"] { --color-primary: 96 165 250; /* RGB values for blue-400 */ --color-secondary: 167 139 250; /* RGB values for purple-400 */ } ``` ```html

Primary background

Primary with 50% opacity

``` --- ## Plugin Development ### Creating a Custom Plugin ```javascript // tailwind.config.js const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ // Text shadow plugin plugin(function({ addUtilities, theme }) { const textShadows = { '.text-shadow-sm': { textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', }, '.text-shadow': { textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', }, '.text-shadow-lg': { textShadow: '0 8px 16px rgba(0, 0, 0, 0.1)', }, '.text-shadow-none': { textShadow: 'none', }, } addUtilities(textShadows) }), // Glass morphism plugin plugin(function({ addUtilities }) { addUtilities({ '.glass': { background: 'rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(10px)', borderRadius: '10px', border: '1px solid rgba(255, 255, 255, 0.2)', }, '.glass-dark': { background: 'rgba(0, 0, 0, 0.1)', backdropFilter: 'blur(10px)', borderRadius: '10px', border: '1px solid rgba(0, 0, 0, 0.2)', }, }) }), // Custom component plugin plugin(function({ addComponents, theme }) { addComponents({ '.btn': { padding: `${theme('spacing.2')} ${theme('spacing.4')}`, borderRadius: theme('borderRadius.md'), fontWeight: theme('fontWeight.semibold'), transition: 'all 0.3s', '&:hover': { transform: 'translateY(-2px)', boxShadow: theme('boxShadow.lg'), }, }, '.btn-primary': { backgroundColor: theme('colors.blue.500'), color: theme('colors.white'), '&:hover': { backgroundColor: theme('colors.blue.600'), }, }, '.card': { backgroundColor: theme('colors.white'), borderRadius: theme('borderRadius.lg'), padding: theme('spacing.6'), boxShadow: theme('boxShadow.md'), }, }) }), // Responsive utilities with variants plugin(function({ addUtilities, matchUtilities, theme }) { matchUtilities( { 'grid-auto-fit': (value) => ({ gridTemplateColumns: `repeat(auto-fit, minmax(${value}, 1fr))`, }), 'grid-auto-fill': (value) => ({ gridTemplateColumns: `repeat(auto-fill, minmax(${value}, 1fr))`, }), }, { values: theme('spacing') } ) }), ], } ``` ### Using the Custom Plugin ```html

Heading with shadow

Glass effect card

Card content

Item 1

Item 2

Item 3

``` ### Official Tailwind Plugins ```javascript // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/container-queries'), ], } ``` --- ## Component Recipes ### 1. Modern Card ```html

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

``` ### 2. Navigation Bar ```html ``` ### 3. Hero Section ```html

Welcome to Our Platform

Build amazing things with the power of modern web technologies

``` ### 4. Form with Validation States ```html ``` ### 5. Modal/Dialog ```html

Modal Title

This is the modal content. You can put any content here.

``` ### 6. Alert/Notification ```html

Success

Your changes have been saved.

Error

There was a problem with your request.

Warning

Please review before proceeding.

``` ### 7. Badge/Tag ```html

Primary Success Error Warning Tag

``` ### 8. Loading Spinner ```html

``` ### 9. Dropdown Menu ```html

Edit Duplicate

Archive Move

Delete

``` ### 10. Pricing Card ```html

Pro Plan

$29/month

Best for professionals

Unlimited projects
Priority support
Advanced analytics
Team collaboration

``` --- ## JIT Mode Patterns JIT (Just-In-Time) mode generates styles on-demand as you author your templates. It's enabled by default in Tailwind CSS 3.0+. ### Arbitrary Values ```html

Twitter blue

Custom red text

Custom position

Custom padding

Custom margin

Custom width

Custom height

Custom font size

Calculated width

Min height

Fluid typography

Custom gradient

Custom grid columns

Responsive auto-fit grid

``` ### Arbitrary Properties ```html

Custom mask type

Custom backdrop filter

Balanced text wrap

Custom grid auto rows

Custom keyframe animation

``` ### Arbitrary Variants ```html

Custom breakpoint

Third child styling

Style all direct children

Based on data attribute

``` ### Advanced JIT Patterns ```html

Margin on all but last

Complex peer interaction

Multiple custom values

Important custom color

``` ### Dynamic Class Names with Safelist ```javascript // tailwind.config.js module.exports = { safelist: [ // Safelist dynamic class patterns { pattern: /bg-(red|green|blue)-(100|500|900)/, }, { pattern: /text-(sm|base|lg|xl)/, variants: ['sm', 'md', 'lg'], }, // Safelist specific classes 'bg-gradient-to-r', 'from-purple-400', 'to-pink-600', ], } ``` --- ## Performance Optimization ### 1. Purge Unused Styles ```javascript // tailwind.config.js module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx,vue}', './pages/**/*.{html,js,jsx,ts,tsx}', './components/**/*.{html,js,jsx,ts,tsx}', './app/**/*.{html,js,jsx,ts,tsx}', ], // Tailwind will scan these files and remove unused styles } ``` ### 2. Optimize Build Size ```javascript // tailwind.config.js module.exports = { // Disable unused core plugins corePlugins: { float: false, objectFit: false, objectPosition: false, }, // Or use a blocklist corePlugins: { preflight: true, // Keep // Disable specific plugins }, } ``` ### 3. Use CSS Layer for Better Control ```css /* global.css */ @tailwind base; @tailwind components; @tailwind utilities; /* Custom base styles */ @layer base { h1 { @apply text-4xl font-bold; } h2 { @apply text-3xl font-semibold; } a { @apply text-blue-600 hover:text-blue-800; } } /* Custom component styles */ @layer components { .btn-primary { @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75; } .card { @apply p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg; } } /* Custom utility classes */ @layer utilities { .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .text-shadow-lg { text-shadow: 0 15px 30px rgba(0,0,0,0.3); } @variants responsive { .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } } ``` ### 4. Extract Components (Don't Repeat) ```html ``` ### 5. Use @apply Wisely ```css /* Use for component classes that are reused */ @layer components { .btn { @apply py-2 px-4 font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75; } } /* But prefer component composition in JS frameworks */ ``` ### 6. Minimize Arbitrary Values ```html

``` ### 7. Preload Critical CSS ```html ``` ### 8. Monitor Bundle Size ```bash # Install bundle analyzer npm install -D tailwindcss-bundle-size # Add to package.json "scripts": { "analyze": "tailwindcss-bundle-size" } ``` ### 9. Use Production Build ```javascript // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { cssnano: { preset: 'default' } } : {}), }, } ``` ### 10. Lazy Load Non-Critical Styles ```html ``` --- ## Searchable Class Index ### Layout - `container` - Responsive container - `block`, `inline-block`, `inline`, `flex`, `grid` - Display types - `hidden` - Hide element - `static`, `relative`, `absolute`, `fixed`, `sticky` - Positioning - `inset-{0,x-0,y-0}` - Position all sides - `top-{size}`, `right-{size}`, `bottom-{size}`, `left-{size}` - Position - `overflow-{auto,hidden,visible,scroll}` - Overflow - `z-{index}` - Z-index ### Flexbox - `flex-{row,col,row-reverse,col-reverse}` - Direction - `flex-{wrap,nowrap,wrap-reverse}` - Wrapping - `justify-{start,end,center,between,around,evenly}` - Main axis - `items-{start,end,center,baseline,stretch}` - Cross axis - `content-{start,end,center,between,around,evenly}` - Multi-line - `flex-{1,auto,initial,none}` - Flex item - `order-{number}` - Flex order - `self-{auto,start,end,center,stretch}` - Align self ### Grid - `grid-cols-{1-12}` - Grid columns - `grid-rows-{1-6}` - Grid rows - `gap-{size}`, `gap-x-{size}`, `gap-y-{size}` - Grid gap - `col-span-{1-12}`, `row-span-{1-6}` - Span columns/rows - `col-start-{number}`, `row-start-{number}` - Start position - `grid-flow-{row,col,dense}` - Auto flow ### Spacing - `p-{size}` - Padding all - `px-{size}`, `py-{size}` - Padding horizontal/vertical - `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}` - Padding sides - `m-{size}` - Margin all - `mx-{size}`, `my-{size}` - Margin horizontal/vertical - `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}` - Margin sides - `space-x-{size}`, `space-y-{size}` - Space between children ### Sizing - `w-{size}`, `h-{size}` - Width/height - `w-{fraction}`, `h-{fraction}` - Fractional width/height - `min-w-{size}`, `max-w-{size}` - Min/max width - `min-h-{size}`, `max-h-{size}` - Min/max height ### Typography - `font-{sans,serif,mono}` - Font family - `text-{xs,sm,base,lg,xl,2xl-9xl}` - Font size - `font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}` - Weight - `leading-{size}` - Line height - `tracking-{size}` - Letter spacing - `text-{left,center,right,justify}` - Text alignment - `text-{color}` - Text color - `underline`, `line-through`, `no-underline` - Text decoration - `uppercase`, `lowercase`, `capitalize` - Text transform - `truncate` - Truncate text ### Backgrounds - `bg-{color}` - Background color - `bg-gradient-to-{direction}` - Gradient direction - `from-{color}`, `via-{color}`, `to-{color}` - Gradient colors - `bg-{center,top,bottom,left,right}` - Background position - `bg-{cover,contain,auto}` - Background size - `bg-{repeat,no-repeat}` - Background repeat ### Borders - `border`, `border-{0,2,4,8}` - Border width - `border-{t,r,b,l}` - Border sides - `border-{color}` - Border color - `border-{solid,dashed,dotted,double,none}` - Border style - `rounded-{none,sm,md,lg,xl,2xl,3xl,full}` - Border radius - `rounded-{t,r,b,l,tl,tr,br,bl}` - Corner radius - `divide-{x,y}` - Divide between children ### Effects - `shadow-{sm,md,lg,xl,2xl,inner,none}` - Box shadow - `opacity-{0-100}` - Opacity - `blur-{sm,md,lg,xl,2xl,3xl}` - Blur filter - `brightness-{0-200}` - Brightness filter - `contrast-{0-200}` - Contrast filter - `grayscale` - Grayscale filter - `saturate-{0-200}` - Saturation filter ### Transitions - `transition-{all,colors,opacity,shadow,transform}` - Transition property - `duration-{75-1000}` - Transition duration - `ease-{linear,in,out,in-out}` - Transition timing - `delay-{75-1000}` - Transition delay - `animate-{spin,ping,pulse,bounce}` - Animations ### Transforms - `scale-{0-150}` - Scale transform - `rotate-{0-180}` - Rotate transform - `translate-{x,y}-{size}` - Translate transform - `skew-{x,y}-{size}` - Skew transform - `origin-{position}` - Transform origin ### Interactivity - `cursor-{pointer,wait,text,move,not-allowed}` - Cursor - `select-{none,text,all,auto}` - User select - `resize-{none,x,y}` - Resize - `snap-{x,y,both}` - Scroll snap ### States & Variants - `hover:` - Hover state - `focus:` - Focus state - `active:` - Active state - `disabled:` - Disabled state - `group-hover:` - Group hover - `peer-hover:` - Peer hover - `first:`, `last:`, `odd:`, `even:` - Pseudo-classes - `sm:`, `md:`, `lg:`, `xl:`, `2xl:` - Responsive breakpoints - `dark:` - Dark mode ### Accessibility - `sr-only` - Screen reader only - `not-sr-only` - Not screen reader only - `focus-visible:` - Focus visible - `aria-{attribute}:` - ARIA states --- ## Quick Tips ### 1. Debugging Classes ```html

Debug element

Debug ring

``` ### 2. Common Centering Patterns ```html

Centered

Centered both ways

Perfect center

``` ### 3. Aspect Ratio Containers ```html

1:1

16:9

4:3

``` ### 4. Truncate Text ```html

Long text that will be truncated...

Long text that will be clamped to 3 lines...

``` ### 5. Dark Mode ```javascript // tailwind.config.js module.exports = { darkMode: 'class', // or 'media' } ``` ```html

Adapts to dark mode

``` --- ## Resources ### Official Documentation - [Tailwind CSS Docs](https://tailwindcss.com/docs) - [Tailwind CSS Playground](https://play.tailwindcss.com) - [Tailwind UI Components](https://tailwindui.com) ### Community Resources - [Awesome Tailwind CSS](https://github.com/aniftyco/awesome-tailwindcss) - [Tailwind Components](https://tailwindcomponents.com) - [Headless UI](https://headlessui.com) ### Tools - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - [Tailwind Shades](https://www.tints.dev) - [Hypercolor](https://hypercolor.dev) - Gradient generator --- This comprehensive reference covers 100+ utility patterns, responsive design patterns, custom configurations, plugin development, component recipes, JIT mode patterns, and performance optimization techniques for Tailwind CSS. Use this as a searchable guide when building with Tailwind CSS.