Tailwind Design System (v4)

What problem does it solve?

This Skill solves inconsistent styling and slow UI iteration by giving you a production-ready blueprint for building a Tailwind CSS v4 design system with coherent tokens, components, and accessible patterns.

Core Features & Use Cases

• Tailwind v4 CSS-first theming: Configure theme tokens with @theme and import tailwindcss correctly for a modern, maintainable setup.
• Semantic design tokens: Define colors, radii, ring offsets, and animation tokens (with OKLCH guidance) so components stay consistent across the app.
• Scalable component architecture: Standardize variants, sizes, states, and responsive patterns using CVA-style patterns and compound components (React 19-friendly refs).
• Accessibility and dark mode: Implement focus rings, error-safe form components, and class-based dark mode via @custom-variant.

Quick Start

Apply the Tailwind v4 CSS-first setup from this Skill to your app.css, defining @theme tokens and dark overrides, then build your UI components as variant-driven, token-backed primitives.