TailwindCSS 路线 03：组件模式——从“堆 class”到可维护的 UI 组件

写 Tailwind 最容易踩的坑：把所有样式都写进一个组件里，然后再也不敢改。

这篇用 4 个组件，给你一套“从小到大”的抽象路径：先交付、再抽常量、再抽组件、最后才做变体系统。

01 组件抽象的顺序（非常重要）#

推荐顺序：

1. 先把 UI 写对（可以长）
2. 把重复的 class 抽成常量（仍在同文件）
3. 把可复用组件抽出来（src/components）
4. 最后才考虑变体系统（比如 size/variant）

02 Button：主/次/幽灵三件套#

实战里你至少需要：

• primary：主操作（高对比）
• secondary：次要操作（边框/浅底）
• ghost：工具栏/轻操作（文字按钮）

并且要考虑：

• disabled 状态（视觉 + 交互）
• loading 状态（防止重复提交）
• size（紧凑/常规）

思路示例（不强制照抄，重点是结构）：

const base =
  "inline-flex items-center justify-center rounded-full font-semibold transition-all active:scale-[0.98]";

const variants = {
  primary:
    "bg-stone-900 text-white hover:bg-stone-800 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-200",
  secondary:
    "border border-[var(--border)] bg-[var(--surface)] text-stone-900 hover:bg-[var(--surface)]/70 dark:text-stone-50",
  ghost:
    "text-stone-600 hover:bg-stone-100 hover:text-stone-900 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100",
};

关键点：变体是字符串，不是魔法。先让团队能读懂。

03 Badge：统一“标签”的视觉语言#

Badge 的目标是：全站标签都长一个样。

建议约定：

• 背景：浅色用 stone-100，深色用 stone-800
• 字号：text-[11px] 或 text-xs
• 圆角：rounded-full

04 Card：交互一致比“好看”更重要#

Card 的真正价值是：hover/边框/阴影的反馈一致。

你现在项目里的 PostCard 已经是非常实用的 Card 模板：透明边框 → hover 出现边框与轻底色。

05 Popover/Modal：Tailwind 管样式，交互用朴素实现#

Tailwind 不解决可访问性与交互逻辑。实战里你可以先用最朴素的方案：

• fixed 盖层
• backdrop-blur 玻璃质感
• Esc 关闭
• 点击外部关闭

项目里的主题切换弹层就是这个思路，简单耐用。

06 小结#

Tailwind 的组件化不是把 class 变短，而是把视觉语言固定、交互反馈一致化、改动范围可控。下一篇我们会做更偏“业务”的实战：表单（输入框、校验提示、按钮组）如何一口气落地成可复用规范。