tailwind-design-system

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.

| 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 for entry animations |

Tailwind CSS v4、デザイン トークン、コンポーネント ライブラリ、レスポンシブ パターンを使用して、スケーラブルなデザイン システムを構築します。コンポーネント ライブラリの作成、デザイン システムの実装、または UI パターンの標準化の際に使用します。 ソース: blockmatic/basilic。