skills.rest
TranVanTienDat
TranVanTienDatCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-design-system

Builds scalable design systems with Tailwind CSS v4, design tokens, and component variants.

Updated Mar 26, 2026
Search Tags:#design system#component library#design tokens#tailwind css#dark mode#react 19#cva
One-click install
npx skills add https://github.com/TranVanTienDat/Milkyway --skill tailwind-design-system-tranvantiendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/TranVanTienDat/Milkyway/tree/main/apps/storefront/.agents/skills/tailwind-design-system
Command: npx skills add https://github.com/TranVanTienDat/Milkyway --skill tailwind-design-system-tranvantiendat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, class-variance-authority, @radix-ui/react-slot.

What problem does it solve? Teams struggle to keep UI styling consistent when building component libraries, theming applications, or migrating from Tailwind CSS v3 to v4. This Skill provides production-ready patterns for CSS-first configuration, semantic design tokens, and accessible components so styling stays standardized across the codebase. ## Core Features & Use Cases - CSS-first Tailwind v4 configuration: Define themes with @theme, semantic OKLCH color tokens, radius and animation tokens, and class-based dark mode via @custom-variant. - Component library patterns: Build type-safe variant components with CVA (class-variance-authority) and compound components using React 19 ref-as-prop conventions. - v3 to v4 migration guidance: A checklist covering config replacement, @import "tailwindcss", keyframes in @theme, and removal of forwardRef. - Use Case: When creating a new Button or Card component for a design system, apply the CVA variant pattern with semantic tokens like bg-primary so the component automatically supports dark mode and theming. ## Quick Start Ask the AI to create a Tailwind CSS v4 theme with semantic color tokens and a Button component with variants using CVA.

Frequently Asked Questions about tailwind-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a theme in Tailwind CSS v4?▼

Tailwind v4 uses CSS-first configuration with the @theme directive instead of tailwind.config.ts. Define tokens like --color-primary and --radius-md inside @theme in your CSS file, then import Tailwind with @import "tailwindcss".

How to set up dark mode in Tailwind CSS v4?▼

Use @custom-variant dark (&:where(.dark, .dark *)) to enable class-based dark mode in v4. Then override your semantic color tokens inside a .dark selector so components switch themes automatically.

What changed from Tailwind v3 to v4?▼

Tailwind v4 replaces tailwind.config.ts with @theme in CSS, @tailwind directives with @import "tailwindcss", and darkMode config with @custom-variant. Keyframes move inside @theme, and plugins like tailwindcss-animate are replaced by native CSS animations.

Does Tailwind v4 work with React 19 components?▼

Yes, and React 19 simplifies component code because ref is passed as a regular prop, eliminating forwardRef. Combine this with class-variance-authority (CVA) to build type-safe variant components like buttons and cards.

Why use OKLCH colors instead of HSL in design tokens?▼

OKLCH provides better perceptual uniformity than HSL, meaning equal numeric changes produce visually consistent color shifts. Define OKLCH values in @theme tokens like --color-primary: oklch(45% 0.2 260) for more predictable theming.

Related Skills

Explore More Software Engineering Skills→
shige1014-devshige1014-dev

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-component-documentation

Generate Storybook component documentation with autodocs, MDX pages, and JSDoc comments.

Official
Intermediate
EndavaEndava
160

fix-accessibility

Audit and fix accessibility issues in BEEQ StencilJS components.

Official
Advanced
wubq511wubq511
6

shadcn-ui

Automate adding and customizing shadcn/ui components with React and Tailwind CSS.

Community
Intermediate