Tailwind CSS v4 Comprehensive Skill Skill

Tailwind CSS v4 Comprehensive Skill

A complete reference for building modern, responsive UIs with Tailwind CSS v4's utility-first approach.

Overview

Tailwind CSS v4 (January 2025) is a utility-first CSS framework with:

CSS-first configuration: Use @theme directive instead of JavaScript config
OKLCH color system: Perceptually uniform colors
5x faster builds: Optimized compilation
Native CSS layers: @layer base/components/utilities
Dynamic theming: CSS custom properties for runtime changes

Key Mental Model: Apply small, single-purpose utility classes directly in HTML. Compose complex designs from atomic utilities.

Quick Reference

| What You Need | Solution | |---------------|----------| | Background color | bg-{color}-{shade} (e.g., bg-blue-500) | | Text color | text-{color}-{shade} (e.g., text-gray-900) | | Padding | p-{n}, px-{n}, py-{n}, pt-{n} | | Margin | m-{n}, mx-{n}, my-{n}, mt-{n} | | Width | w-{n}, w-full, w-1/2, w-screen | | Height | h-{n}, h-full, h-screen, min-h-screen | | Flexbox | flex, flex-row, flex-col, gap-{n} | | Grid | grid, grid-cols-{n}, gap-{n} | | Font size | text-xs to text-9xl | | Font weight | font-light to font-black | | Border radius | rounded, rounded-lg, rounded-full | | Shadow | shadow-sm to shadow-2xl | | Responsive | sm:, md:, lg:, xl:, 2xl: | | Dark mode | dark:bg-gray-900 | | Hover state | hover:bg-blue-600 | | Transition | transition, duration-300 |

1. CSS-First Configuration (v4)

Setup

/* app.css or globals.css */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand: #3b82f6;
  --color-accent: oklch(0.72 0.11 178);

  /* Custom spacing */
  --spacing-18: 4.5rem;

  /* Custom fonts */
  --font-display: "Playfair Display", serif;

  /* Custom shadows */
  --shadow-3xl: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

Dark Mode Configuration

/* Method 1: System preference (default) */
@import "tailwindcss";

/* Method 2: Class-based toggle */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* Method 3: Data attribute */
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

JavaScript toggle:

document.documentElement.classList.toggle("dark");
// or
document.documentElement.dataset.theme = "dark";

2. Spacing Scale

Base unit: --spacing: 0.25rem (4px)

| Class | Value | Pixels | |-------|-------|--------| | p-0, m-0 | 0 | 0px | | p-1, m-1 | 0.25rem | 4px | | p-2, m-2 | 0.5rem | 8px | | p-3, m-3 | 0.75rem | 12px | | p-4, m-4 | 1rem | 16px | | p-5, m-5 | 1.25rem | 20px | | p-6, m-6 | 1.5rem | 24px | | p-8, m-8 | 2rem | 32px | | p-10, m-10 | 2.5rem | 40px | | p-12, m-12 | 3rem | 48px | | p-16, m-16 | 4rem | 64px | | p-20, m-20 | 5rem | 80px | | p-24, m-24 | 6rem | 96px | | p-32, m-32 | 8rem | 128px |

Padding Utilities

<!-- All sides -->
<div class="p-4">padding: 1rem</div>

<!-- Horizontal (left + right) -->
<div class="px-6">padding-inline: 1.5rem</div>

<!-- Vertical (top + bottom) -->
<div class="py-4">padding-block: 1rem</div>

<!-- Individual sides -->
<div class="pt-4">padding-top: 1rem</div>
<div class="pr-4">padding-right: 1rem</div>
<div class="pb-4">padding-bottom: 1rem</div>
<div class="pl-4">padding-left: 1rem</div>

Margin Utilities

<!-- All sides -->
<div class="m-4">margin: 1rem</div>

<!-- Horizontal centering -->
<div class="mx-auto">margin-left: auto; margin-right: auto</div>

<!-- Negative margin -->
<div class="-mt-4">margin-top: -1rem</div>

Gap (Flexbox & Grid)

<div class="flex gap-4">gap: 1rem</div>
<div class="grid gap-x-8 gap-y-4">column-gap: 2rem; row-gap: 1rem</div>

Space Between (Children)

<!-- Horizontal spacing between children -->
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical spacing -->
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

3. Colors

Color Application

| Pattern | Description | Example | |---------|-------------|---------| | text-{color}-{shade} | Text color | text-blue-500 | | bg-{color}-{shade} | Background | bg-red-600 | | border-{color}-{shade} | Border | border-gray-300 | | ring-{color}-{shade} | Focus ring | ring-blue-400 | | shadow-{color}-{shade} | Shadow color | shadow-indigo-500 |

Color Palette

22 color families, each with 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)

Neutrals: slate, gray, zinc, neutral, stone Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose Special: black, white, transparent

Opacity Modifier

<!-- 75% opacity -->
<div class="bg-blue-500/75">75% blue</div>

<!-- 50% opacity -->
<div class="text-red-600/50">50% red text</div>

<!-- 25% opacity -->
<div class="border-gray-300/25">25% border</div>

Custom Colors

<!-- Hexadecimal -->
<div class="bg-[#ff5733]">Custom hex</div>

<!-- RGB -->
<div class="bg-[rgb(255,87,51)]">Custom RGB</div>

<!-- CSS Variable (v4 syntax) -->
<div class="bg-(--brand-color)">CSS variable</div>

4. Typography

| Class | Size | Line Height | |-------|------|-------------| | text-xs | 0.75rem (12px) | 1rem | | text-sm | 0.875rem (14px) | 1.25rem | | text-base | 1rem (16px) | 1.5rem | | text-lg | 1.125rem (18px) | 1.75rem | | text-xl | 1.25rem (20px) | 1.75rem | | text-2xl | 1.5rem (24px) | 2rem | | text-3xl | 1.875rem (30px) | 2.25rem | | text-4xl | 2.25rem (36px) | 2.5rem | | text-5xl | 3rem (48px) | 1 | | text-6xl | 3.75rem (60px) | 1 | | text-7xl | 4.5rem (72px) | 1 | | text-8xl | 6rem (96px) | 1 | | text-9xl | 8rem (128px) | 1 |

Font Weight

| Class | Weight | |-------|--------| | font-thin | 100 | | font-extralight | 200 | | font-light | 300 | | font-normal | 400 | | font-medium | 500 | | font-semibold | 600 | | font-bold | 700 | | font-extrabold | 800 | | font-black | 900 |

Letter Spacing (Tracking)

| Class | Value | |-------|-------| | tracking-tighter | -0.05em | | tracking-tight | -0.025em | | tracking-normal | 0 | | tracking-wide | 0.025em | | tracking-wider | 0.05em | | tracking-widest | 0.1em |

Text Alignment

<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified</p>

Line Height (Leading)

| Class | Value | |-------|-------| | leading-none | 1 | | leading-tight | 1.25 | | leading-snug | 1.375 | | leading-normal | 1.5 | | leading-relaxed | 1.625 | | leading-loose | 2 |

5. Sizing

Width

<!-- Fixed widths (spacing scale) -->
<div class="w-4">width: 1rem</div>
<div class="w-64">width: 16rem</div>

<!-- Fractional widths -->
<div class="w-1/2">width: 50%</div>
<div class="w-1/3">width: 33.333%</div>
<div class="w-2/3">width: 66.667%</div>

<!-- Special values -->
<div class="w-full">width: 100%</div>
<div class="w-screen">width: 100vw</div>
<div class="w-min">width: min-content</div>
<div class="w-max">width: max-content</div>
<div class="w-fit">width: fit-content</div>

<!-- Arbitrary values -->
<div class="w-[500px]">width: 500px</div>

Height

<div class="h-16">height: 4rem</div>
<div class="h-full">height: 100%</div>
<div class="h-screen">height: 100vh</div>
<div class="h-dvh">height: 100dvh (dynamic viewport)</div>
<div class="min-h-screen">min-height: 100vh</div>

Size (Width + Height)

<!-- Set both width and height -->
<div class="size-12">width: 3rem; height: 3rem</div>
<div class="size-full">width: 100%; height: 100%</div>

Container Widths

| Class | Value | Pixels | |-------|-------|--------| | max-w-xs | 20rem | 320px | | max-w-sm | 24rem | 384px | | max-w-md | 28rem | 448px | | max-w-lg | 32rem | 512px | | max-w-xl | 36rem | 576px | | max-w-2xl | 42rem | 672px | | max-w-4xl | 56rem | 896px | | max-w-7xl | 80rem | 1280px |

6. Flexbox

Display & Direction

<!-- Enable flexbox -->
<div class="flex">display: flex</div>

<!-- Direction -->
<div class="flex flex-row">horizontal (default)</div>
<div class="flex flex-col">vertical</div>
<div class="flex flex-row-reverse">reverse horizontal</div>
<div class="flex flex-col-reverse">reverse vertical</div>

Justify Content (Main Axis)

<div class="flex justify-start">flex-start</div>
<div class="flex justify-center">center</div>
<div class="flex justify-end">flex-end</div>
<div class="flex justify-between">space-between</div>
<div class="flex justify-around">space-around</div>
<div class="flex justify-evenly">space-evenly</div>

Align Items (Cross Axis)

<div class="flex items-start">align to start</div>
<div class="flex items-center">center</div>
<div class="flex items-end">align to end</div>
<div class="flex items-stretch">stretch (default)</div>
<div class="flex items-baseline">baseline</div>

Flex Grow/Shrink

<div class="flex-1">flex: 1 1 0%</div>
<div class="flex-auto">flex: 1 1 auto</div>
<div class="flex-none">flex: none</div>
<div class="grow">flex-grow: 1</div>
<div class="shrink-0">flex-shrink: 0</div>

Common Patterns

<!-- Center everything -->
<div class="flex items-center justify-center">
  Centered content
</div>

<!-- Space between with vertical center -->
<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Column with gap -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Responsive direction -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Stacked on mobile, side-by-side on desktop</div>
</div>

7. Grid

Basic Grid

<!-- Enable grid -->
<div class="grid">display: grid</div>

<!-- Define columns -->
<div class="grid grid-cols-1">1 column</div>
<div class="grid grid-cols-2">2 columns</div>
<div class="grid grid-cols-3">3 columns</div>
<div class="grid grid-cols-12">12 columns</div>

<!-- With gap -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Column/Row Spanning

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-2">Spans 2 columns</div>
  <div class="col-span-4">Spans 4 columns</div>
  <div class="col-span-full">Spans all columns</div>
</div>

<!-- Row spanning -->
<div class="row-span-2">Spans 2 rows</div>

Responsive Grid

<!-- Mobile: 1 col, Tablet: 2 cols, Desktop: 3 cols, Large: 4 cols -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

8. Responsive Design

Breakpoints

| Prefix | Min Width | CSS | |--------|-----------|-----| | (none) | 0px | Default (mobile-first) | | sm: | 640px | @media (min-width: 640px) | | md: | 768px | @media (min-width: 768px) | | lg: | 1024px | @media (min-width: 1024px) | | xl: | 1280px | @media (min-width: 1280px) | | 2xl: | 1536px | @media (min-width: 1536px) |

Mobile-First Approach

<!-- Base style (mobile), then override at breakpoints -->
<div class="text-center sm:text-left">
  <!-- Centered on mobile, left-aligned on 640px+ -->
</div>

<img class="w-16 md:w-32 lg:w-48" />
<!-- 16 units on mobile, 32 on 768px+, 48 on 1024px+ -->

Max-Width Variants

<!-- Apply BELOW a breakpoint -->
<div class="max-sm:hidden">Hidden below 640px</div>
<div class="max-md:flex-col">Column below 768px</div>

Breakpoint Ranges

<!-- Apply only between md and lg -->
<div class="md:max-lg:bg-blue-500">
  Blue only between 768px and 1024px
</div>

Common Responsive Patterns

<!-- Stack on mobile, side-by-side on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="md:w-1/2">Left</div>
  <div class="md:w-1/2">Right</div>
</div>

<!-- Responsive text size -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Heading
</h1>

<!-- Responsive padding -->
<div class="p-4 md:p-8 lg:p-12">
  Content
</div>

<!-- Hide/show based on screen size -->
<nav class="hidden md:flex">Desktop navigation</nav>
<button class="md:hidden">Mobile menu button</button>

9. Dark Mode

Basic Usage

<!-- Light/dark backgrounds -->
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">
    Adapts to theme
  </p>
</div>

Complete Theme Pattern

/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-background: #ffffff;
  --color-foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: #0a0a0a;
    --color-foreground: #ededed;
  }
}

<div class="bg-background text-foreground">
  Uses theme colors automatically
</div>

Toggle Script

// Check system preference on load
if (localStorage.theme === 'dark' ||
    (!('theme' in localStorage) &&
     window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}

// Toggle function
function toggleTheme() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark')
    ? 'dark'
    : 'light';
}

10. Interactive States

Hover, Focus, Active

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600">
  Hover me
</button>

<!-- Focus -->
<input class="border focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

<!-- Active (pressed) -->
<button class="bg-blue-500 active:bg-blue-700">
  Press me
</button>

<!-- Focus-visible (keyboard only) -->
<button class="focus-visible:ring-2 focus-visible:ring-offset-2">
  Keyboard focus
</button>

Form States

<!-- Disabled -->
<input class="disabled:opacity-50 disabled:cursor-not-allowed" disabled />

<!-- Invalid -->
<input class="invalid:border-red-500 invalid:text-red-600" type="email" />

<!-- Required -->
<input class="required:border-red-500" required />

<!-- Checked -->
<input type="checkbox" class="checked:bg-blue-500" />

Group Hover

<a href="#" class="group p-4 border rounded-lg">
  <h3 class="text-gray-900 group-hover:text-blue-600">
    Title
  </h3>
  <p class="text-gray-500 group-hover:text-gray-700">
    Description
  </p>
</a>

11. Shadows & Effects

Box Shadow

| Class | Description | |-------|-------------| | shadow-sm | Subtle shadow | | shadow | Default shadow | | shadow-md | Medium shadow | | shadow-lg | Large shadow | | shadow-xl | Extra large | | shadow-2xl | 2x large | | shadow-inner | Inset shadow | | shadow-none | No shadow |

<!-- Card with shadow -->
<div class="bg-white p-6 rounded-lg shadow-lg">
  Card content
</div>

<!-- Interactive shadow -->
<div class="shadow-md hover:shadow-xl transition-shadow">
  Hover for larger shadow
</div>

Border Radius

| Class | Value | |-------|-------| | rounded-none | 0 | | rounded-sm | 0.125rem (2px) | | rounded | 0.25rem (4px) | | rounded-md | 0.375rem (6px) | | rounded-lg | 0.5rem (8px) | | rounded-xl | 0.75rem (12px) | | rounded-2xl | 1rem (16px) | | rounded-3xl | 1.5rem (24px) | | rounded-full | 9999px (pill/circle) |

<!-- Individual corners -->
<div class="rounded-t-lg">Top corners only</div>
<div class="rounded-tl-lg">Top-left only</div>
<div class="rounded-b-lg rounded-t-none">Bottom only, no top</div>

Ring (Focus Ring)

<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Focus ring on keyboard focus
</button>

12. Transitions & Animations

Transition Utilities

<!-- Default transition (most properties) -->
<button class="transition hover:bg-blue-600">
  Smooth hover
</button>

<!-- Specific properties -->
<button class="transition-colors hover:bg-blue-600">Colors only</button>
<button class="transition-transform hover:scale-105">Transform only</button>
<button class="transition-opacity hover:opacity-50">Opacity only</button>
<button class="transition-shadow hover:shadow-lg">Shadow only</button>
<button class="transition-all hover:bg-blue-600 hover:scale-105">All</button>

Duration

| Class | Duration | |-------|----------| | duration-75 | 75ms | | duration-150 | 150ms | | duration-200 | 200ms | | duration-300 | 300ms | | duration-500 | 500ms | | duration-700 | 700ms | | duration-1000 | 1000ms |

Timing Functions

| Class | Easing | |-------|--------| | ease-linear | Linear | | ease-in | Ease in | | ease-out | Ease out | | ease-in-out | Ease in-out |

Complete Transition Example

<button class="px-4 py-2
               bg-blue-500 hover:bg-blue-600
               text-white
               rounded-lg
               shadow-md hover:shadow-lg
               transform hover:scale-105 active:scale-95
               transition-all duration-200 ease-out">
  Interactive Button
</button>

Reduced Motion

<!-- Respect user preferences -->
<button class="transition duration-300 motion-reduce:duration-0">
  Accessible animation
</button>

13. Layers System

@layer base (Global Styles)

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }

  * {
    @apply border-gray-200;
  }
}

@layer components (Reusable Components)

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

@utility (Custom Utilities)

@utility container {
  @apply mx-auto px-4 sm:px-8 lg:px-16;
}

@utility btn-custom {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
  @variant hover {
    @apply bg-blue-600;
  }
}

14. Arbitrary Values

Basic Syntax

<!-- Dimensions -->
<div class="w-[500px] h-[300px]">Fixed size</div>

<!-- Colors -->
<div class="bg-[#ff5733] text-[rgb(255,87,51)]">Custom colors</div>

<!-- CSS calculations -->
<div class="w-[calc(100%-2rem)]">Calculated width</div>

<!-- Grid columns -->
<div class="grid-cols-[200px_1fr_100px]">Custom grid</div>

CSS Variables (v4 Syntax)

<!-- v4: Use parentheses for CSS variables -->
<div class="bg-(--brand-color)">CSS variable</div>

<!-- NOT square brackets (v3 syntax) -->
<!-- <div class="bg-[var(--brand-color)]"> DEPRECATED -->

Type Hints

<!-- Specify type when ambiguous -->
<div class="bg-[length:200px_100px]">Background size</div>
<div class="bg-[url('/img.png')]">Background image</div>

15. Component Patterns

Navbar

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <div class="flex items-center gap-2">
    <img src="/logo.svg" class="w-8 h-8" />
    <span class="text-lg font-semibold">Brand</span>
  </div>

  <div class="hidden md:flex items-center gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Features</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Pricing</a>
    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
      Sign In
    </button>
  </div>

  <button class="md:hidden">
    <svg class="w-6 h-6"><!-- menu icon --></svg>
  </button>
</nav>

Hero Section

<section class="py-16 md:py-24">
  <div class="container mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
      Build faster with Tailwind
    </h1>
    <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-8">
      A utility-first CSS framework for rapid UI development
    </p>
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
      <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
        Get Started
      </button>
      <button class="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50">
        Learn More
      </button>
    </div>
  </div>
</section>

Card

<div class="bg-white rounded-xl shadow-lg overflow-hidden
            hover:shadow-xl transition-shadow duration-300">
  <img src="/image.jpg" class="w-full h-48 object-cover" />
  <div class="p-6">
    <span class="text-sm text-blue-500 font-medium uppercase tracking-wide">
      Category
    </span>
    <h3 class="text-xl font-semibold mt-2 mb-3">
      Card Title
    </h3>
    <p class="text-gray-600 mb-4">
      Card description goes here with some details.
    </p>
    <button class="text-blue-500 font-medium hover:text-blue-600">
      Read more &rarr;
    </button>
  </div>
</div>

Interactive Button

<button class="px-6 py-3
               bg-blue-500 hover:bg-blue-600 active:bg-blue-700
               text-white font-semibold
               rounded-lg
               shadow-lg hover:shadow-xl
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               transform hover:scale-105 active:scale-95
               transition-all duration-200
               disabled:opacity-50 disabled:cursor-not-allowed">
  Click Me
</button>

Form Input

<input
  type="email"
  placeholder="Enter your email"
  class="w-full px-4 py-2
         border-2 border-gray-300 rounded-lg
         focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none
         invalid:border-red-500 invalid:focus:ring-red-200
         disabled:bg-gray-100 disabled:cursor-not-allowed
         transition-colors duration-200
         placeholder:text-gray-400"
/>

Gradient Text

<h1 class="inline-block
           bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
           bg-clip-text text-transparent
           text-4xl font-bold">
  Gradient Heading
</h1>

16. Best Practices

DO

Mobile-first: Write base styles for mobile, add breakpoint modifiers for larger screens
Use semantic color names: Define --color-primary, --color-background in @theme
Extract repeated patterns: Use @layer components for reusable component classes
Leverage arbitrary values sparingly: Prefer theme tokens, extract to @theme if repeated
Use gap over space-*: More flexible and works with both flex and grid
Add transitions: transition-all duration-200 for smooth interactions
Include focus states: Always add focus:ring-* for accessibility

DON'T

Don't fight Tailwind: If you're writing lots of custom CSS, reconsider your approach
Don't nest arbitrarily: Keep class lists readable, extract to components when too long
Don't forget responsive: Always test at multiple breakpoints
Don't skip dark mode: Add dark: variants from the start
Don't use old v3 syntax: bg-[var(--color)] is now bg-(--color) in v4
Don't overuse @apply: It defeats the utility-first purpose

Performance Tips

v4 is 5x faster for full builds, 100x faster for incremental
No manual content configuration needed (auto-detects templates)
Use CSS layers for proper cascade control
Built-in vendor prefixing (no autoprefixer needed)

17. CSS Cheatsheet

Display

.block        -> display: block;
.inline       -> display: inline;
.inline-block -> display: inline-block;
.flex         -> display: flex;
.grid         -> display: grid;
.hidden       -> display: none;

Position

.static   -> position: static;
.relative -> position: relative;
.absolute -> position: absolute;
.fixed    -> position: fixed;
.sticky   -> position: sticky;
.inset-0  -> top: 0; right: 0; bottom: 0; left: 0;

Overflow

.overflow-hidden -> overflow: hidden;
.overflow-auto   -> overflow: auto;
.overflow-scroll -> overflow: scroll;
.overflow-x-auto -> overflow-x: auto;

Z-Index

.z-0    -> z-index: 0;
.z-10   -> z-index: 10;
.z-20   -> z-index: 20;
.z-50   -> z-index: 50;
.z-auto -> z-index: auto;

18. Migration from v3

Key Changes

| v3 | v4 | |----|-----| | tailwind.config.js | @theme in CSS | | @tailwind base/components/utilities | @import "tailwindcss" | | bg-[var(--color)] | bg-(--color) | | darkMode: 'class' in config | @custom-variant dark in CSS | | Requires autoprefixer | Built-in vendor prefixing |

Upgrade Command

npx @tailwindcss/upgrade

Manual Steps

Update imports: @import "tailwindcss";
Move theme config to CSS @theme block
Update CSS variable syntax in classes
Update arbitrary values with commas to underscores

Resources

Checklist Before Writing Tailwind Code

Responsive: Am I using mobile-first breakpoints (sm:, md:, lg:)?
Dark mode: Have I added dark: variants for theme-aware colors?
Interactive states: Do buttons/links have hover:, focus:, active: states?
Transitions: Have I added transition-* for smooth interactions?
Accessibility: Do interactive elements have focus:ring-* and focus-visible:?
Spacing: Am I using consistent spacing scale values?
Color opacity: Am I using / syntax for opacity (e.g., bg-blue-500/75)?
Custom values: If using arbitrary values, can I extract to @theme?

Agent Skills: Tailwind CSS v4 Comprehensive Skill

Skill Files