tailwind-css
Installation
SKILL.md
Tailwind CSS v4
Verify before implementing: For v4-specific syntax (@theme, @variant, CSS-first config), search current docs via search_docs before writing code. Tailwind v4 changed significantly from v3 and training data may be stale.
CSS-First Configuration
v4 eliminates tailwind.config.ts. All configuration lives in CSS.
| Directive | Purpose |
|---|---|
@import "tailwindcss" |
Entry point (replaces @tailwind base/components/utilities) |
@theme { } |
Define/extend design tokens -- auto-generates utility classes |
@theme inline { } |
Map CSS variables to Tailwind utilities without generating new vars |
@theme static { } |
Define tokens that don't generate utilities |
@utility name { } |
Create custom utilities (replaces @layer components + @apply) |
@custom-variant name (selector) |
Define custom variants |
@import "tailwindcss";
Related skills