skills.rest
WP-Coaching
WP-CoachingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwind-design-system

Builds Tailwind CSS design systems with tokens, CVA variants, and accessible components.

Updated Sep 1, 2021
Search Tags:#theming#design system#design tokens#tailwind css#dark mode#react components#cva
One-click install
npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill tailwind-design-system-wp-coaching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/tailwind-design-system
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill tailwind-design-system-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, class-variance-authority, clsx, tailwind-merge, tailwindcss-animate.

What problem does it solve? Building consistent, themeable UI components in Tailwind CSS often leads to scattered utility classes, hardcoded colors, and missing accessibility states. This Skill provides structured patterns for design tokens, component variants, and dark mode so teams can standardize UI across a codebase. ## Core Features & Use Cases - Design Token Architecture: Set up semantic color tokens with CSS variables and HSL values, supporting light and dark themes through a single configuration. - Component Patterns: Implement CVA-based variant components (Button, Card, Input, Grid), compound components, and form components with error states and ARIA attributes. - Theming & Animation: Configure dark mode with a ThemeProvider, and apply enter/exit animations using tailwindcss-animate utilities. - Use Case: When scaffolding a new Next.js app, use this Skill to generate a complete ui/ component library with Button, Card, Input, and Dialog components that share semantic tokens and support dark mode out of the box. ## Quick Start Ask the AI to create a themed Button component with CVA variants and dark mode support using Tailwind CSS.

Frequently Asked Questions about tailwind-design-system

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

FAQPage Schema
How do I create a Button component with variants in Tailwind CSS?▼

Use class-variance-authority (CVA) to define base styles plus variant and size options, then merge classes with a cn() utility combining clsx and tailwind-merge. This gives type-safe props like variant="destructive" and size="lg" on a forwardRef component.

How to set up dark mode with Tailwind CSS and CSS variables?▼

Set darkMode: "class" in tailwind.config, define HSL CSS variables for light and .dark scopes in globals.css, and toggle the class on the root element with a ThemeProvider. Semantic tokens like bg-background then switch automatically between themes.

What is the difference between semantic tokens and Tailwind color utilities?▼

Semantic tokens like primary or muted map to CSS variables and describe purpose, while utilities like blue-500 hardcode specific colors. Semantic tokens enable runtime theming and dark mode without changing component code.

Does CVA work with React Server Components in Next.js?▼

Yes, CVA variant definitions are plain functions and work in server components. Only interactive parts like ThemeProvider or Dialog need the "use client" directive; presentational components like Card and Button render on the server.

Why should I avoid arbitrary values in Tailwind class names?▼

Arbitrary values like w-[347px] bypass the design token system, creating inconsistency and breaking theming. Extend the Tailwind theme configuration instead so spacing, colors, and radii stay centralized and reusable.

Related Skills

Explore More Software Engineering Skills→
futureteafuturetea

TailwindCSS Styling

Configure Tailwind CSS with PostCSS and autoprefixer for React and Vite projects.

Community
Intermediate
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
idy-00idy-00

design-qa

Set up design QA gates covering token lint, accessibility, contrast, and visual regression testing.

Community
Advanced
pedronauckpedronauck
601

shadcn

Implements shadcn/ui component patterns with design tokens, CVA variants, and Radix accessibility.

Community
Intermediate