tailwind-design-system

This skill provides a structured framework for managing modern design systems with Tailwind CSS v4. It is designed for frontend developers and UI engineers who need to maintain consistent styling across large codebases while leveraging the latest CSS-first features. By moving away from traditional configuration files toward CSS-native definitions, this skill simplifies the creation of tokens, themes, and complex UI components. It ensures that your design system remains performant, accessible, and easily maintainable as your application scales.

• CSS-first configuration using @theme directives to replace legacy tailwind.config.ts files.

• Advanced semantic color token management using OKLCH color spaces for improved perception and consistency.

• Component architecture support including CVA (Class Variance Authority) for managing complex variants and states.

• Built-in support for dark mode using native @custom-variant and modern CSS features.

• Standardized responsive patterns and accessibility best practices integrated into the base layer.

• Animation token management using keyframes directly within the @theme definition.

• Use this skill when initiating a new design system project or migrating an existing Tailwind v3 codebase to v4.

• Reference the included mapping table to quickly translate legacy v3 patterns like theme extensions or dark mode class strategies to modern v4 equivalents.

• Follow the provided architecture to define tokens in a hierarchy from brand to semantic to component-specific variables.

• Apply the recommended CVA patterns for building modular, reusable UI components like buttons, inputs, and modals.

• Note that this skill is strictly optimized for Tailwind CSS v4 environments; users on v3 should refer to official migration guides before implementation.