tailwind-v4_skill

Overview

This skill captures expert guidance for Tailwind CSS v4 with a CSS-first configuration, the @theme directive, OKLCH color usage, and Vite integration. It helps frontend engineers adopt the new v4 architecture for predictable theming, smaller builds, and modern CSS features. The focus is practical: setup, theme authoring, utilities, responsive patterns, and migration advice.

How this skill works

The skill inspects project requirements and outputs a CSS-first Tailwind v4 setup: a Vite-integrated install, an @theme-based design token layer, and utility-driven component examples. It recommends OKLCH color tokens expressed as CSS variables for dynamic theming and dark mode, shows container queries and 3D transforms where useful, and suggests build-time optimizations to keep output minimal. Guidance maps directly to common tasks like migration, custom utilities, and responsive/dark-mode patterns.

When to use it

• Starting a new project and preferring CSS-first Tailwind configuration
• Migrating from Tailwind v3 to v4 to modernize theming and tooling
• Defining semantic design tokens and OKLCH-based color systems
• Implementing dark mode, responsive patterns, or container queries
• Optimizing Tailwind builds with Vite and minimizing generated CSS

Best practices

• Author theme tokens with @theme and expose CSS variables for components
• Prefer OKLCH for custom palettes and use semantic names (primary, accent)
• Always use @import 'tailwindcss' rather than legacy @tailwind directives
• Leverage utility classes over bespoke CSS; create utilities only when needed
• Design with dark mode and container queries from the start to avoid refactors

Example use cases

• Create a design system file that declares semantic OKLCH tokens via @theme and CSS variables
• Migrate a v3 project by replacing JS config with @theme directives and updating color tokens to OKLCH
• Build a responsive card component using utility classes, container queries, and a dark-mode variant
• Add custom animation utilities and 3D transform utilities within the v4 utility layer
• Configure Vite for fast dev reloads and tree-shaken production CSS output