skills.rest
juanjaragavi
juanjaragaviCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Updated Sep 17, 2026
Search Tags:#design system#design tokens#tailwind css#dark mode#react components#cva#css-first configuration
One-click install
npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-design-system-juanjaragavi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/juanjaragavi/utilities-manager/tree/main/.agents/skills/tailwind-design-system
Command: npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-design-system-juanjaragavi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, class-variance-authority, clsx, tailwind-merge, @radix-ui/react-slot, @radix-ui/react-dialog, react-hook-form, zod, lucide-react, and includes references (resource) components.

What problem does it solve? Standardizing UI patterns across a codebase is difficult when teams mix ad-hoc utility classes, legacy Tailwind v3 configs, and inconsistent theming. This Skill provides production-ready patterns for building a coherent design system with Tailwind CSS v4, including design tokens, dark mode, and reusable components. ## Core Features & Use Cases - CSS-first v4 configuration: Define semantic color, radius, and animation tokens with @theme, OKLCH colors, and @custom-variant dark mode instead of tailwind.config.ts. - Component patterns: Ready-to-use CVA-based Button, Card compound components, form inputs with React Hook Form and Zod, and responsive Grid/Container layouts for React 19. - Advanced theming and migration: Native CSS animations with @starting-style, custom @utility directives, namespace overrides, and a complete v3-to-v4 migration checklist. - Use Case: When scaffolding a new React component library, apply the token hierarchy and CVA variant patterns to produce accessible, themeable components with light and dark mode support out of the box. ## Quick Start Ask the AI to set up a Tailwind CSS v4 design system with semantic color tokens, dark mode, and a Button component using CVA variants.

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 Tailwind CSS v4 without tailwind.config.ts?▼

Tailwind v4 uses CSS-first configuration: replace the config file with `@import "tailwindcss"` and an `@theme` block in your CSS. Define tokens like `--color-primary` inside `@theme`, and use `@custom-variant dark` for class-based dark mode.

How to migrate from Tailwind CSS v3 to v4?▼

Replace `tailwind.config.ts` with a CSS `@theme` block, swap `@tailwind` directives for `@import "tailwindcss"`, move colors to `--color-*` variables, replace `darkMode: "class"` with `@custom-variant dark`, and move keyframes inside `@theme`. The skill includes a 10-item migration checklist.

How do I set up dark mode in Tailwind CSS v4?▼

Define `@custom-variant dark (&:where(.dark, .dark *))` in your CSS, then override token values inside a `.dark` class block. A ThemeProvider with localStorage persistence and prefers-color-scheme detection toggles the class on the document root.

Does Tailwind v4 still work with React forwardRef?▼

No, with React 19 you should remove forwardRef because ref is passed as a regular prop. Components accept `ref?: React.Ref<HTMLElement>` directly in their props, which simplifies component definitions like Button and Card.

What is the difference between @theme inline and @theme static in Tailwind v4?▼

`@theme inline` lets tokens reference other CSS variables, such as mapping `--font-sans` to an imported font variable. `@theme static` forces CSS variables to be generated even when unused, useful for tokens consumed outside Tailwind utilities.

Why use OKLCH colors instead of HSL in a design system?▼

OKLCH provides better perceptual uniformity than HSL, so lightness steps and alpha variants built with color-mix() look consistent across hues. Define tokens like `--color-primary: oklch(45% 0.2 260)` inside the `@theme` block.

Related Skills

Explore More Software Engineering Skills→
mojwangmojwang

design-review

Audit UI code changes for design-system token and layout compliance.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-component-documentation

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

Official
Intermediate
Community-AccessCommunity-Access
387

Contrast Master

Audit color contrast and visual accessibility for WCAG AA compliance.

Official
Advanced
droppiidroppii

ck:ui-styling

Automate UI styling and component composition for React apps with shadcn/ui and Tailwind.

Official
Advanced