tailwind-design-system

name	tailwind-design-system
description	Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Tailwind Design System

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

When to Use This Skill

• Creating a component library with Tailwind
• Implementing design tokens and theming
• Building responsive and accessible components
• Standardizing UI patterns across a codebase
• Migrating to or extending Tailwind CSS
• Setting up dark mode and color schemes

Core Concepts

1. Design Token Hierarchy

Brand Tokens (abstract)
    └── Semantic Tokens (purpose)
        └── Component Tokens (specific)

Example:
    blue-500 → primary → button-bg

2. Component Architecture

Base styles → Variants → Sizes → States → Overrides

Quick Start

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Semantic color tokens
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        border: 'hsl(var(--border))',
        ring: 'hsl(var(--ring))',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}

export default config

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3  ;
    :   ;
    : ;
  }

   {
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
    :   ;
  }
}

Patterns

Pattern 1: CVA (Class Variance Authority) Components

// components/ui/button.tsx
import { cva, type VariantProps } from 'class-variance-authority'
import { forwardRef } from 'react'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  // Base styles
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      : ,
    },
  }
)

  
   .<>,
    <typeof buttonVariants> {
  ?: 
}

  = forwardRef<, >(
   {
      = asChild ?  : 
     (
      
    )
  }
)
. = 

 { , buttonVariants }


< variant= size=></>

Pattern 2: Compound Components

// components/ui/card.tsx
import { cn } from '@/lib/utils'
import { forwardRef } from 'react'

const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'rounded-lg border bg-card text-card-foreground shadow-sm',
        className
      )}
      {...props}
    />
  )
)
Card.displayName = 'Card'

const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('flex flex-col space-y-1.5 p-6', className)}
      {...props}
    />
  )
)
CardHeader. = 

  = forwardRef<, .<>>(
   (
    
  )
)
. = 

  = forwardRef<, .<>>(
   (
    
  )
)
. = 

  = forwardRef<, .<>>(
   (
    
  )
)
. = 

  = forwardRef<, .<>>(
   (
    
  )
)
. = 

 { , , , , ,  }


<>
  
  
  
</>

Pattern 3: Form Components

// components/ui/input.tsx
import { forwardRef } from 'react'
import { cn } from '@/lib/utils'

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: string
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, error, ...props }, ref) => {
    return (
      <div className="relative">
        <input
          type={type}
          className={cn(
            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring   ',
             && ' ',
            
          )}
          =
          =
          = ? `${}`  }
          {}
        />
        {error && (
          
            {error}
          
        )}
      
    )
  }
)
. = 


 { cva,   }  

 labelVariants = (
  
)

  = forwardRef<, .<>>(
   (
    
  )
)
. = 


 { useForm }  
 { zodResolver }  
 *  z  

 schema = z.({
  : z.().(),
  : z.().(, ),
})

 () {
   { register, handleSubmit, : { errors } } = ({
    : (schema),
  })

   (
    
  )
}

Pattern 4: Responsive Grid System

// components/ui/grid.tsx
import { cn } from '@/lib/utils'
import { cva, type VariantProps } from 'class-variance-authority'

const gridVariants = cva('grid', {
  variants: {
    cols: {
      1: 'grid-cols-1',
      2: 'grid-cols-1 sm:grid-cols-2',
      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
      5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
    },
    gap: {
      none: 'gap-0',
      sm: 'gap-2',
      md: 'gap-4',
      lg: 'gap-6',
      xl: 'gap-8',
    },
  },
  defaultVariants: {
    cols: 3,
    gap: 'md',
  },
})

interface GridProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof gridVariants> {}

export  () {
   (
    
  )
}


 containerVariants = (, {
  : {
    : {
      : ,
      : ,
      : ,
      : ,
      : ,
      : ,
    },
  },
  : {
    : ,
  },
})

 
   .<>,
    <typeof containerVariants> {}

  () {
   (
    
  )
}


<>
  
</>

Pattern 5: Animation Utilities

// lib/animations.ts - Tailwind CSS Animate utilities
import { cn } from './utils'

export const fadeIn = 'animate-in fade-in duration-300'
export const fadeOut = 'animate-out fade-out duration-300'
export const slideInFromTop = 'animate-in slide-in-from-top duration-300'
export const slideInFromBottom = 'animate-in slide-in-from-bottom duration-300'
export const slideInFromLeft = 'animate-in slide-in-from-left duration-300'
export const slideInFromRight = 'animate-in slide-in-from-right duration-300'
export const zoomIn = 'animate-in zoom-in-95 duration-300'
export const zoomOut = 'animate-out zoom-out-95 duration-300'

// Compound animations
export const modalEnter = cn(fadeIn, zoomIn, 'duration-200')
export const modalExit = cn(fadeOut, zoomOut, 'duration-200')
export const dropdownEnter = cn(fadeIn, slideInFromTop, 'duration-150')
export const dropdownExit = cn(fadeOut, 'slide-out-to-top', 'duration-150')


 *    

  = forwardRef<
  .< .>,
  .< .>
>( (
  
))

  = forwardRef<
  .< .>,
  .< .>
>( (
  
))

Pattern 6: Dark Mode Implementation

// providers/ThemeProvider.tsx
'use client'

import { createContext, useContext, useEffect, useState } from 'react'

type Theme = 'dark' | 'light' | 'system'

interface ThemeProviderProps {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

interface ThemeContextType {
  theme: Theme
  setTheme: (theme: Theme) => void
  resolvedTheme: 'dark' | 'light'
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({
  children,
  defaultTheme = 'system',
  storageKey = 'theme',
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(defaultTheme)
  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('light')

  useEffect( {
     stored = .(storageKey)   | 
     (stored) (stored)
  }, [storageKey])

  ( {
     root = ..
    root..(, )

     :  | 

     (theme === ) {
      resolved = .().
        ? 
        : 
    }  {
      resolved = theme
    }

    root..(resolved)
    (resolved)
  }, [theme])

   value = {
    theme,
    :  {
      .(storageKey, newTheme)
      (newTheme)
    },
    resolvedTheme,
  }

   (
    
  )
}

   = () => {
   context = ()
   (!context)   ()
   context
}


 { ,  }  
 { useTheme }  

  () {
   { resolvedTheme, setTheme } = ()

   (
    
  )
}

Utility Functions

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Focus ring utility
export const focusRing = cn(
  'focus-visible:outline-none focus-visible:ring-2',
  'focus-visible:ring-ring focus-visible:ring-offset-2'
)

// Disabled utility
export const disabled = 'disabled:pointer-events-none disabled:opacity-50'

Best Practices

Do's

• Use CSS variables - Enable runtime theming
• Compose with CVA - Type-safe variants
• Use semantic colors - primary not blue-500
• Forward refs - Enable composition
• Add accessibility - ARIA attributes, focus states

Don'ts

• Don't use arbitrary values - Extend theme instead
• Don't nest @apply - Hurts readability
• Don't skip focus states - Keyboard users need them
• Don't hardcode colors - Use semantic tokens
• Don't forget dark mode - Test both themes

Resources

• Tailwind CSS Documentation
• CVA Documentation
• shadcn/ui
• Radix Primitives