Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.
Expert guidance for styling with Tailwind CSS v4, centered on its CSS-first configuration model, modern utility patterns, and type-safe component styling. In v4, tailwind.config.ts is eliminated in favor of CSS-only configuration using directives: @import "tailwindcss" as the entry point, @theme and @theme static to define design tokens, @utility for custom utilities, and @custom-variant for custom variants. Theme tokens declared with @theme automatically become utility classes, so a token like --color-brand can be used as bg-brand, text-brand, or border-brand.
The skill covers linting and correctness through eslint-plugin-better-tailwindcss, distinguishing error-level correctness rules (no-conflicting-classes, no-unknown-classes) from warning-level stylistic rules (enforce-canonical-classes, enforce-shorthand-classes, no-deprecated-classes, no-duplicate-classes, no-unnecessary-whitespace), and recommends running the project's ESLint check after modifying classes. It promotes shorthand patterns such as p-6 over px-6 py-6 and size-6 over w-6 h-6, and treats CSS Modules as a last resort that must include @reference "#tailwind"; at the top to access utilities and theme tokens.
Common tasks are documented for adding components with variants using tv() from tailwind-variants, debugging styles against v4 breaking changes, working with theme colors and opacity modifiers, and adding enter/exit animations with tw-animate-css by combining animate-in or animate-out with effect classes. A quick-reference table captures v4 conventions: linear/radial/conic gradient syntax (bg-linear-*, not bg-gradient-*), opacity and line-height modifier syntax (bg-black/50, text-base/7), auto-created CSS variable utilities (bg-my-color, not bg-[--var-my-color]), and min-h-dvh instead of min-h-screen. Deeper material lives in reference files for v4 rules and best practices, tailwind-variants patterns, tw-animate-css, and general coding preferences. Use it when adding or fixing classes, configuring or migrating to v4, or building type-safe variant components.
In CSS files, not tailwind.config.ts. You use directives like @import "tailwindcss", @theme to define tokens, @utility for custom utilities, and @custom-variant for variants. Tokens defined with @theme automatically become utility classes.
Use tv() from tailwind-variants, defining a base class plus variants (for example color and size). The skill points to references/tailwind-variants.md for the full patterns including the slots API and composition.
Gradients use bg-linear-*, bg-radial, and bg-conic instead of bg-gradient-*, and theme-driven CSS variables are used as bg-my-color (auto-created from @theme) rather than bg-[--var-my-color].
Only as a last resort for complex CSS that cannot be expressed with utilities. Every .module.css file must include @reference "#tailwind"; at the top so Tailwind utilities and theme tokens work inside the module.
It recommends eslint-plugin-better-tailwindcss, with correctness rules like no-conflicting-classes and no-unknown-classes as errors and stylistic rules as warnings, and advises running the project's ESLint check after modifying classes.
Quick Setup:
.claude/skills/Repository
paulrberg/agent-skills