Tailwind Design System

作者 wshobson46891e7e60da無授權條款收錄於 2026年10月8日更新於 2026年10月8日

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

僅含說明Design & Creative Software Development

AI 產生的概覽

指導使用 Tailwind CSS v4 建構設計系統，涵蓋設計權杖、元件變體與響應式模式。

功能: 此技能提供使用 Tailwind CSS v4 建構設計系統的說明，涵蓋 CSS 優先設定、設計權杖、元件變體、響應式模式與無障礙。它說明 v4 的變更，例如在 CSS 中使用 @theme、@import "tailwindcss"、自訂深色模式變體與動畫權杖，並附有快速上手的 CSS 範例。它產出的是指引與程式碼模式，而非產生的檔案，更多細節放在參考文件中。
適用情境: 適用於建立元件庫、實作設計權杖或主題、統一程式庫中的 UI 模式，或從 Tailwind v3 移轉到 v4。也適合使用原生 CSS 功能設定深色模式，以及建構響應式、無障礙的元件。
執行需求: 不含指令碼，僅提供說明與參考文件。依這些模式實作需要專案使用 Tailwind CSS v4。

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

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

Quick Start

css

/* 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: 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);
  --color-destructive: oklch(53% 0.22 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(91% 0.01 264);  --color-ring: oklch(14.5% 0.025 264);
  --color-card: oklch(100% 0 0);  --color-card-foreground: oklch(14.5% 0.025 264);
  /* Ring offset for focus states */  --color-ring-offset: oklch(100% 0 0);
  /* Radius tokens */  --radius-sm: 0.25rem;  --radius-md: 0.375rem;  --radius-lg: 0.5rem;  --radius-xl: 0.75rem;
  /* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables */  --animate-fade-in: fade-in 0.2s ease-out;  --animate-fade-out: fade-out 0.2s ease-in;  --animate-slide-in: slide-in 0.3s ease-out;  --animate-slide-out: slide-out 0.3s ease-in;
  @keyframes fade-in {    from {      opacity: 0;    }    to {      opacity: 1;    }  }
  @keyframes fade-out {    from {      opacity: 1;    }    to {      opacity: 0;    }  }
  @keyframes slide-in {    from {      transform: translateY(-0.5rem);      opacity: 0;    }    to {      transform: translateY(0);      opacity: 1;    }  }
  @keyframes slide-out {    from {      transform: translateY(0);      opacity: 1;    }    to {      transform: translateY(-0.5rem);      opacity: 0;    }  }}
/* Dark mode variant - use @custom-variant for class-based dark mode */@custom-variant dark (&:where(.dark, .dark *));
/* Dark mode theme overrides */.dark {  --color-background: oklch(14.5% 0.025 264);  --color-foreground: oklch(98% 0.01 264);
  --color-primary: oklch(98% 0.01 264);  --color-primary-foreground: oklch(14.5% 0.025 264);
  --color-secondary: oklch(22% 0.02 264);  --color-secondary-foreground: oklch(98% 0.01 264);
  --color-muted: oklch(22% 0.02 264);  --color-muted-foreground: oklch(65% 0.02 264);
  --color-accent: oklch(22% 0.02 264);  --color-accent-foreground: oklch(98% 0.01 264);
  --color-destructive: oklch(42% 0.15 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(22% 0.02 264);  --color-ring: oklch(83% 0.02 264);
  --color-card: oklch(14.5% 0.025 264);  --color-card-foreground: oklch(98% 0.01 264);
  --color-ring-offset: oklch(14.5% 0.025 264);}
/* Base styles */@layer base {  * {    @apply border-border;  }
  body {    @apply bg-background text-foreground antialiased;  }}

/* 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: 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);
  --color-destructive: oklch(53% 0.22 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(91% 0.01 264);  --color-ring: oklch(14.5% 0.025 264);
  --color-card: oklch(100% 0 0);  --color-card-foreground: oklch(14.5% 0.025 264);
  /* Ring offset for focus states */  --color-ring-offset: oklch(100% 0 0);
  /* Radius tokens */  --radius-sm: 0.25rem;  --radius-md: 0.375rem;  --radius-lg: 0.5rem;  --radius-xl: 0.75rem;
  /* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables */  --animate-fade-in: fade-in 0.2s ease-out;  --animate-fade-out: fade-out 0.2s ease-in;  --animate-slide-in: slide-in 0.3s ease-out;  --animate-slide-out: slide-out 0.3s ease-in;
  @keyframes fade-in {    from {      opacity: 0;    }    to {      opacity: 1;    }  }
  @keyframes fade-out {    from {      opacity: 1;    }    to {      opacity: 0;    }  }
  @keyframes slide-in {    from {      transform: translateY(-0.5rem);      opacity: 0;    }    to {      transform: translateY(0);      opacity: 1;    }  }
  @keyframes slide-out {    from {      transform: translateY(0);      opacity: 1;    }    to {      transform: translateY(-0.5rem);      opacity: 0;    }  }}
/* Dark mode variant - use @custom-variant for class-based dark mode */@custom-variant dark (&:where(.dark, .dark *));
/* Dark mode theme overrides */.dark {  --color-background: oklch(14.5% 0.025 264);  --color-foreground: oklch(98% 0.01 264);
  --color-primary: oklch(98% 0.01 264);  --color-primary-foreground: oklch(14.5% 0.025 264);
  --color-secondary: oklch(22% 0.02 264);  --color-secondary-foreground: oklch(98% 0.01 264);
  --color-muted: oklch(22% 0.02 264);  --color-muted-foreground: oklch(65% 0.02 264);
  --color-accent: oklch(22% 0.02 264);  --color-accent-foreground: oklch(98% 0.01 264);
  --color-destructive: oklch(42% 0.15 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(22% 0.02 264);  --color-ring: oklch(83% 0.02 264);
  --color-card: oklch(14.5% 0.025 264);  --color-card-foreground: oklch(98% 0.01 264);
  --color-ring-offset: oklch(14.5% 0.025 264);}
/* Base styles */@layer base {  * {    @apply border-border;  }
  body {    @apply bg-background text-foreground antialiased;  }}

Core Concepts

1. Design Token Hierarchy

Brand Tokens (abstract)    └── Semantic Tokens (purpose)        └── Component Tokens (specific)
Example:    oklch(45% 0.2 260) → --color-primary → bg-primary

Brand Tokens (abstract)    └── Semantic Tokens (purpose)        └── Component Tokens (specific)
Example:    oklch(45% 0.2 260) → --color-primary → bg-primary

2. Component Architecture

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

來源與署名

來源：wshobson/agents位於plugins/frontend-mobile-development/skills/tailwind-design-system提交46891e7

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Tailwind Design System

Tailwind Design System (v4)

When to Use This Skill

Key v4 Changes

Quick Start

Core Concepts

1. Design Token Hierarchy

2. Component Architecture

Detailed patterns and worked examples

來源與署名

更多來自 wshobson/agents 的技能

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design