tailwind

name	tailwind
description	Tailwind v4 + DaisyUI design-system reference — CSS-first @theme config, OKLCH tokens, CVA variants, dark mode.
disable-model-invocation	true

Tailwind Design System (v4)

Adapted from wshobson/agents

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

When to Use This Skill

• Creating a component library with Tailwind v4
• Implementing design tokens and theming with CSS-first configuration
• Building responsive and accessible components
• Standardizing UI patterns across a codebase
• Migrating from Tailwind v3 to v4
• Setting up dark mode with native CSS features

Key v4 Changes

v3 Pattern	v4 Pattern
tailwind.config.ts	@theme in CSS
@tailwind base/components/utilities	@import "tailwindcss"
darkMode: "class"	@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors	@theme { --color-*: value }
require("tailwindcss-animate")	CSS @keyframes in @theme + @starting-style

Quick Start

/* app.css - Tailwind v4 CSS-first configuration */
@import "tailwindcss";

@theme {
  /* Semantic color tokens using OKLCH */
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(14.5% 0.025 264);
  --color-primary: oklch(14.5% 0.025 264);
  --color-primary-foreground: oklch(98% 0.01 264);
  --color-secondary: oklch(96% 0.01 264);
  --color-secondary-foreground: oklch(14.5% 0.025 264);
  --color-muted: oklch(96% 0.01 264);
  --color-muted-foreground: oklch(46% 0.02 264);
  --color-accent: oklch(96% 0.01 264);
  --color-accent-foreground: oklch(14.5% 0.025 264);
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );

  
  : ;
  : ;
  : ;
  : ;

  
  : fade-in  ease-out;
  : fade-out  ease-in;
  : slide-in  ease-out;

   fade-in {  { : ; }  { : ; } }
   fade-out {  { : ; }  { : ; } }
   slide-in {
     { : (-); : ; }
     { : (); : ; }
  }
}


 dark (&:where(.dark, .dark *));

 {
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
  : (  );
}

 base {
  * {  border-border; }
   {  bg-background text-foreground antialiased; }
}

Core Concepts

Design Token Hierarchy

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

Example: oklch(45% 0.2 260) → --color-primary → bg-primary

Component Architecture

Base styles → Variants → Sizes → States → Overrides

Key Pattern: CVA Components

import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium 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-border 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: 'size-10',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
)

export function Button({ className, variant, size, asChild = , ref, ...props }) {
    = asChild ?  : 
   
}

Utility Function

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

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

Advanced v4 Patterns

Custom Utilities

@utility line-t {
  @apply relative before:absolute before:top-0 before:-left-[100vw] before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10;
}

Namespace Overrides

@theme {
  --color-*: initial; /* Clear all defaults */
  --color-white: #fff;
  --color-primary: oklch(45% 0.2 260);
}

Semi-transparent Variants

@theme {
  --color-primary-50: color-mix(in oklab, var(--color-primary) 5%, transparent);
  --color-primary-100: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

v3 to v4 Migration Checklist

• Replace tailwind.config.ts with CSS @theme block
• Change @tailwind base/components/utilities to @import "tailwindcss"
• Move color definitions to @theme { --color-*: value }
• Replace darkMode: "class" with @custom-variant dark
• Move @keyframes inside @theme blocks
• Replace tailwindcss-animate with native CSS animations
• Update h-10 w-10 to size-10
• Remove forwardRef (React 19 passes ref as prop)
• Consider OKLCH colors for better color perception
• Replace custom plugins with @utility directives

Best Practices

Do: Use @theme blocks, OKLCH colors, CVA for variants, semantic tokens (bg-primary not bg-blue-500), size-* shorthand, ARIA attributes + focus states

Don't: Use tailwind.config.ts, @tailwind directives, forwardRef (React 19), arbitrary values (extend @theme instead), hardcoded colors