skills.rest
SanketAdlak
SanketAdlakCOMMUNITY
Explore all skills by this author →
Website𝕏@devsanket14GitHub

tailwind-design-system

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires 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? Setting up a consistent design system with Tailwind CSS v4 requires learning its new CSS-first configuration model, which differs significantly from v3's JavaScript config. This Skill provides ready-to-use patterns for design tokens, component variants, dark mode, and animations so you avoid misconfigurations and inconsistent UI patterns. ## Core Features & Use Cases - CSS-first theming with @theme: Define semantic color tokens in OKLCH, radius scales, and animation keyframes directly in CSS, including dark mode overrides via @custom-variant. - Component patterns with CVA and React 19: Build type-safe Button, Card, Input, Label, Grid, and Dialog components using class-variance-authority, Radix UI primitives, and ref-as-prop (no forwardRef). - v3 to v4 migration guidance: Follow a 10-item checklist covering config replacement, directive changes, dark mode, animations, and React 19 updates. - Use Case: You are standardizing UI across a React app. Use this Skill to generate a themed token file, a variant-driven Button component, and a ThemeProvider with system preference detection in one pass. ## Quick Start Ask the AI to create a Tailwind v4 design system with semantic color tokens, a CVA-based Button component, and class-based dark mode for your React 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 or --radius-md. JavaScript config files are replaced by these CSS declarations.

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

Define a custom variant with @custom-variant dark (&:where(.dark, .dark *)) and override your CSS variables inside a .dark class. A ThemeProvider can toggle the class on the root element and persist the choice in localStorage.

What is the difference between Tailwind v3 and v4 configuration?▼

v3 uses tailwind.config.ts and @tailwind directives, while v4 uses @import "tailwindcss" and @theme blocks in CSS. Dark mode moves from darkMode: "class" to @custom-variant, and animations use native @keyframes inside @theme instead of plugins.

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 directly in their props, for example function Button({ ref, ...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 options with defaultVariants. Combine it with a cn() utility built from clsx and tailwind-merge to merge classes safely.

Why are my Tailwind v4 animations not working after migrating from v3?▼

The tailwindcss-animate plugin is replaced by native CSS in v4. Move @keyframes inside your @theme block and reference them through --animate-* variables so the keyframes are emitted with the theme.

Related Skills

Explore More Software Engineering Skills→
selrai-companyselrai-company

shadcn-ui

Implement accessible shadcn/ui components in Next.js TypeScript projects.

Official
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
froide-kkfroide-kk
1

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

Official
Intermediate
allthingslinuxallthingslinux
4

tailwind-design-system

Standardize Tailwind CSS design tokens and component variants for scalable UI.

Official
Intermediate