tailwind-design-system

Set up a React component library with Tailwind CSS v4 by defining design tokens and base styles within your main CSS file using `@theme` blocks. This Skill provides architectural patterns like CVA and Compound Components to ensure UI consistency, maintainability, and accessibility.

The best way to manage design tokens in Tailwind CSS v4 is through CSS-first configuration using `@theme` blocks. This Skill facilitates implementing semantic color, radius, and animation tokens directly in your CSS to standardize UI patterns across your project.

Yes, Tailwind CSS v4 supports CSS-first configuration, which is leveraged by this Skill to build scalable design systems. It allows you to define design tokens and base styles directly within your CSS file rather than relying on a JavaScript configuration file.

Implement dark mode and responsive patterns in a Tailwind CSS v4 design system using native CSS features and responsive grid patterns. This Skill provides specific architectural patterns to standardize these responsive designs and native CSS dark mode implementations.

Component architecture patterns that work best for a Tailwind CSS v4 design system include Class Variance Authority (CVA), Compound Components, and Form Components. This Skill demonstrates these patterns to help standardize UI and maintain accessibility.

Yes, you can use this Skill for existing React projects to standardize UI patterns and ensure maintainability. It focuses on integrating Tailwind CSS v4 features like semantic design tokens and modern CSS configurations into your component architecture.