Migrate Tailwind CSS projects from v3 to v4 with CSS-first configuration.
npx skills add https://github.com/nthplusio/functional-claude --skill tailwindv4
Please help me install this Agent Skill. Skill: tailwindv4 Source: https://github.com/nthplusio/functional-claude/tree/main/plugins/shadcn-dev/skills/tailwindv4 Command: npx skills add https://github.com/nthplusio/functional-claude --skill tailwindv4
Upgrading Tailwind projects from v3 to v4 and adopting a CSS-first configuration can be error-prone and time-consuming. This Skill provides structured guidance, migration steps, and reference material to streamline the upgrade for developers and design teams.
Begin by installing Tailwind CSS v4, then migrate your CSS to use the @theme block and the new v4 syntax. Refer to references/v4-syntax.md and references/migration-guide.md for detailed steps and examples.
High-intent search queries and answers about installing and using this skill.
Migrating from Tailwind CSS v3 to v4 involves installing the new version, updating dependencies, and adapting configuration files to use the new CSS-first syntax and @theme block for design tokens.
CSS-first configuration in Tailwind v4 uses the @theme block and CSS variables to manage colors, typography, and spacing directly in your stylesheets, replacing the traditional JavaScript configuration file approach.
You can use OKLCH colors in Tailwind CSS theming by defining them as design tokens within the @theme block, allowing your web-development project to leverage the OKLCH color space for broader and more consistent color gamuts.
Tailwind v4 moves away from JavaScript configuration files toward a CSS-first approach, meaning you will need to adapt your existing v3 configuration into the new @theme block syntax during the migration process.
Common issues when upgrading to Tailwind v4 involve updating dependencies and adapting configuration files to the new CSS-first syntax, which can be error-prone without structured migration guidance and reference material.
Devinga-com-brConfigure Tailwind v4 with shadcn/ui using CSS variables and automatic dark mode.
artivillaAutomate Tailwind v4 theming with CSS-first @theme directives and OKLCH tokens.
Chris-MaskeyConfigure Tailwind CSS v4 projects with the CSS-first @theme system.
mikkerGuide Tailwind v4 migrations with CSS-first @theme and @utility patterns.
