Tailwind Css

This is a comprehensive guide for working with Tailwind CSS v4's new CSS-first configuration system. It covers the shift away from JavaScript config files to using directives like @theme and @utility directly in your CSS. You get practical patterns for component variants with tailwind-variants, ESLint rules specific to v4, and references for handling animations with tw-animate-css. The skill emphasizes checking your project's theme tokens before reaching for arbitrary values and includes debugging tips for common v4 gotchas like gradient syntax changes. Honestly feels more like a well-organized reference doc than an interactive skill, but if you're migrating to v4 or building component libraries, having all these patterns and breaking changes in one place beats hunting through official docs.

skills.sh installs: 3K
GitHub stars: 104
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add paulrberg/agent-skills --skill tailwind-css --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS

Follow the installed Tailwind version and the repository's tokens, components, class-merging utility, CSS entrypoint, and nearby UI. They take precedence over this skill. Do not add packages, change integration, or migrate versions without a request and local need.

Routing

Apply coding preferences only where the project is silent.
For v4 configuration, migration, directives, or generated classes, use v4 rules and the matching official docs.
Read tailwind-variants, tw-animate-css, or ESLint only when that integration exists locally or the request adds it.

Do not apply v4 syntax to an older installation. Preserve responsive, interaction, accessible, and dark-mode behavior. Do not redesign beyond the request.