skills.rest
serguei9090
serguei9090COMMUNITY
Explore all skills by this author →
GitHub

tailwind-design-system

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

Updated Mar 22, 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/serguei9090/LogLensAi --skill tailwind-design-system-serguei9090
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/serguei9090/LogLensAi/tree/main/.agents/skills/tailwind-design-system
Command: npx skills add https://github.com/serguei9090/LogLensAi --skill tailwind-design-system-serguei9090

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? It removes the guesswork of setting up a scalable design system with Tailwind CSS v4, where the configuration model changed significantly from v3 (CSS-first @theme blocks instead of tailwind.config.ts), and provides ready-made component patterns for React 19. ## Core Features & Use Cases - CSS-first theming: Define semantic color, radius, and animation tokens with @theme, OKLCH colors, and @custom-variant dark mode. - Component patterns: CVA-based Button, compound Card, form Input/Label with validation, and responsive Grid/Container components using React 19 ref-as-prop. - Advanced references: Native CSS animations with @starting-style, ThemeProvider dark mode, custom @utility directives, and a v3-to-v4 migration checklist. - Use Case: When building a new React component library, apply the provided @theme token setup and CVA button pattern to get consistent, accessible, dark-mode-ready UI primitives. ## Quick Start Ask the AI to set up a Tailwind CSS v4 design system with semantic color tokens, dark mode, and a CVA-based Button component for your React 19 project.

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: import Tailwind with `@import "tailwindcss"` and define tokens inside an `@theme` block, such as `--color-primary: oklch(45% 0.2 260)`. The JavaScript config file is no longer needed.

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

Define a custom variant with `@custom-variant dark (&:where(.dark, .dark *))`, then override token values inside a `.dark` class block. A ThemeProvider with localStorage persistence and prefers-color-scheme detection handles toggling.

What changed from Tailwind v3 to v4?▼

Key changes include replacing `tailwind.config.ts` with `@theme` blocks, `@tailwind` directives with `@import "tailwindcss"`, `darkMode: "class"` with `@custom-variant`, and tailwindcss-animate with native CSS keyframes. A 10-item migration checklist covers all steps.

Does Tailwind v4 work with React 19 forwardRef?▼

React 19 passes ref as a regular prop, so forwardRef is no longer needed. Components accept `ref?: React.Ref<HTMLElement>` directly in their props and pass it to the underlying element.

How do I create type-safe component variants with Tailwind?▼

Use class-variance-authority (CVA) to define base styles plus variant and size maps with default variants. Combine with a `cn()` utility built on clsx and tailwind-merge to merge classes safely.

Related Skills

Explore More Software Engineering Skills→
jason23452jason23452

coss

Implements React UIs with coss components built on Base UI and Tailwind CSS v4.

Community
Advanced
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
jacob-balslevjacob-balslev
1

color-system-design

Construct accessible color palettes and semantic tokens for light and dark themes.

Community
Advanced
edisonabeledisonabel

ckm:ui-styling

Create accessible responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced