用途
Tailwind Design System 面向使用 Tailwind CSS 构建设计系统的开发者，目标是用工具类打造一致、可扩展的 UI。资料以示例代码形式覆盖组件模式、响应式设计、深色模式、自定义主题和动画五个方面。
主要能力
组件模式
提供按钮、卡片、输入框三类组件的类名写法。
按钮变体：
- 主按钮：
bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors - 次按钮：
bg-gray-100 text-gray-900 px-4 py-2 rounded-lg hover:bg-gray-200 border border-gray-300
卡片：
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
<h3 class="text-lg font-semibold text-gray-900">Title</h3>
<p class="mt-2 text-gray-600">Description text here.</p>
</div>
输入框：
<label class="block">
<span class="text-sm font-medium text-gray-700">Email</span>
<input type="email" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 placeholder:text-gray-400" placeholder="you@example.com" />
</label>
响应式设计
采用移动优先策略，从基础样式开始，再用 md:、lg: 适配更大屏幕。
<!-- Mobile-first: stack → side by side → 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
<!-- Hide on mobile, show on desktop -->
<nav class="hidden md:flex gap-4">...</nav>
<!-- Mobile menu, hidden on desktop -->
<nav class="flex md:hidden">...</nav>
深色模式
使用 class 策略切换：
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<h1 class="text-gray-900 dark:text-white">Heading</h1>
<p class="text-gray-600 dark:text-gray-400">Body text</p>
<button class="bg-blue-600 dark:bg-blue-500 text-white">Action</button>
</div>
切换与跟随系统偏好：
// Toggle dark mode
document.documentElement.classList.toggle('dark');
// Respect system preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
自定义主题
在 tailwind.config.js 中扩展设计令牌：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
500: '#0ea5e9',
900: '#0c4a6e',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
spacing: {
'18': '4.5rem',
},
},
},
};
动画
<!-- Fade in -->
<div class="animate-fade-in">Content</div>
<!-- Slide up -->
<div class="animate-in slide-in-from-bottom-4 duration-300">Content</div>
<!-- Pulse loading -->
<div class="animate-pulse bg-gray-200 h-4 rounded w-3/4"></div>
<!-- Skeleton loader -->
<div class="space-y-3 animate-pulse">
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
<div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
使用方式
资料以可直接复制的 HTML 类名与配置片段呈现，开发者将其应用到 Tailwind CSS 项目中即可。深色模式切换与系统偏好检测提供 JavaScript 片段。
适用场景
- 需要统一按钮、卡片、表单等基础组件样式的项目
- 需要移动优先响应式布局的界面
- 需要深色模式支持的产品
- 需要集中管理颜色、字体、间距等设计令牌的设计系统
- 需要加载态、骨架屏等动画反馈的界面
限制与注意事项
资料给出的注意事项：
- 移动优先：从基础样式开始，用
md:和lg:适配更大屏幕。 - 谨慎使用
@apply，它会削弱工具类的意义，仅在组件库中使用。 - 设计令牌（颜色、间距、字体）应放在
tailwind.config.js，不要硬编码在类名中。 - 使用
group和peer处理父子/兄弟样式，而非 JavaScript。 - Tailwind v4 使用 CSS-first 配置，需确认所用版本。
关于安装命令、收费、价格、平台支持等信息，资料暂未提供。