Migrate Tailwind v3 projects to v4 with @theme tokens and component patterns.
npx skills add https://github.com/rbaumier/skills --skill tailwind-rbaumier
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/rbaumier/skills/tree/main/tailwind Command: npx skills add https://github.com/rbaumier/skills --skill tailwind-rbaumier
Modern frontend teams struggle to keep Tailwind-based codebases consistent, accessible, and safe during migrations to Tailwind v4. This Skill provides clear conventions and actionable rules to avoid common pitfalls (dynamic class purging, inconsistent spacing, fragile dark-mode handling) and to adopt CSS-first configuration, semantic tokens, and robust component patterns.
Audit your project for tailwind v3 patterns, convert theme values into a CSS @theme block using OKLCH tokens, replace @tailwind directives with @import "tailwindcss", and apply cn()/cva() patterns while ensuring accessibility and motion-reduce support.
High-intent search queries and answers about installing and using this skill.
Migrate Tailwind v3 to v4 by moving tailwind.config.js values into @theme CSS blocks, replacing @tailwind directives with @import "tailwindcss", and applying v4 opacity and utility directives.
Implement dark mode in Tailwind v4 by defining OKLCH tokens in @theme, clearing defaults with --color-*: initial, and overriding those tokens in a .dark selector using @custom-variant for robust theme toggles.
Class merging for component variants works by using cva() to define variant patterns and cn()—combining twMerge and clsx—to safely merge classes and prevent Tailwind style conflicts.
Yes, Tailwind v4 supports OKLCH color tokens by defining them directly in the @theme block, and you can generate translucent variants using the color-mix(in oklab) CSS function.
Avoid @apply for component styling because it creates hidden dependencies and purging issues; instead, use tailwind-variants for slot-based components and cn() for safe utility merges.
For Tailwind v4 integration, use @tailwindcss/vite or @tailwindcss/postcss build plugins, and replace legacy config arrays with @plugin, @utility, and @custom-variant directives while avoiding node_modules scanning.
GDSDNMigrate Tailwind CSS projects from v3 to v4 with Oxide engine.
shige1014-devBuild Tailwind CSS v4 design systems with @theme tokens and CVA variants.
acquiaEnforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.
ThinkOodleImplement modern CSS architecture with custom properties and design tokens in Rails.
