tailwind-design-system

使用Tailwind CSS工具类创建一致且可扩展的设计系统，包括自定义主题、设计令牌和响应式设计模式。在构建设计系统、实现自定义主题、创建可重用的工具模式、配置Tailwind主题扩展、实现暗黑模式、构建响应式布局、创建设计令牌、使用任意值或建立一致的间距和排版比例时使用。

Tailwind CSS - Utility-First Styling

When to use this skill

Building design systems with Tailwind CSS
Implementing custom themes and design tokens
Creating reusable utility class patterns
Configuring Tailwind theme extensions
Implementing light and dark mode themes
Building responsive layouts with Tailwind grid/flexbox
Creating consistent spacing and typography scales
Using arbitrary values for one-off styles
Implementing custom color palettes
Building component variants with Tailwind
Creating animation and transition systems
Establishing design consistency across projects

When to use this skill

Styling with Tailwind, creating design systems, responsive layouts.
When working on related tasks or features
During development that requires this expertise

Use when: Styling with Tailwind, creating design systems, responsive layouts.

Core Pattern

```jsx

<div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"> <h2 className="text-xl font-bold">Title</h2> </div> \`\`\`

Resources

Tailwind CSS