Tailwind + shadcn/ui 打造一致性的设计系统

Tailwind 的强大之处在于它提供了一套语义一致的设计 token，而 shadcn/ui 则补上了组件的“最后一公里”。两者组合，可以让我们在保持灵活性的同时快速实现高保真 UI。

设计 token 与主题

通过自定义 CSS 变量，可以将品牌色、字号、内间距统统抽象出来：

:root {
  --radius: 0.625rem;
  --primary: oklch(0.2 0.03 240);
  --foreground: oklch(0.98 0.01 260);
}

结合 @custom-variant 与 Tailwind 原子化能力，我们可以构建更易维护的深色模式。

组件分层策略

• 基础组件：Button、Card、Input 等通用组件
• 模块组件：ArticleCard、TagBadge、AuthorCard 等业务组件
• 页面组件：用于组合模块与布局，保持页面层轻薄

这种分层方式能确保当设计系统需要升级时，我们只要调整基础组件即可获得全站更新。

动画与交互

借助 tw-animate-css 与 Framer Motion，我们可以为交互添加恰到好处的动画效果，例如文章卡片的浮动、导航滑入等，强化品牌个性而不过度分散注意力。

维护设计一致性的三条原则

1. 约束 > 自由：为组件提供有限的尺寸、颜色变体，降低设计偏差。
2. 文档化：在 Storybook 或专门页面列出所有组件状态。
3. 度量用户反馈：定期回顾数据，优化真正影响体验的细节。

有了设计系统之后，你的博客也可以像产品一样不断演进。