Tailwind Design System (v4)

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

Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.

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

Quick Start

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

/* Define your theme with @theme */
@theme {
  /* Semantic color tokens using OKLCH for better color perception */
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(14.5% 0.025 264);

  --color-primary: (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  
  : (  );

  
  : ;
  : ;
  : ;
  : ;

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

   fade-in {
     {
      : ;
    }
     {
      : ;
    }
  }

   fade-out {
     {
      : ;
    }
     {
      : ;
    }
  }

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

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


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


 {
  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
  : (  );

  : (  );
}


 base {
  * {
     border-border;
  }

   {
     bg-background text-foreground antialiased;
  }
}