Tailwind CSS 最佳实践：从混乱到优雅

为什么要用 Utility-First

Utility-First CSS（如 Tailwind）在最开始是有争议的。但实际用了之后，你会发现：

• 不需要命名：不再纠结 .card-wrapper-inner-container 这样的命名
• 作用域天然隔离：没有样式泄露问题
• 设计系统内建：间距、颜色、字号都是设计系统的直接映射
• 生产体积小：Purge 后只保留实际使用的 CSS

CSS 变量的力量

在这个博客中，我们用 CSS 变量来管理亮色/暗色两套主题：

:root {
  --bg-primary: #FFFFFF;
  --text-primary: #18181B;
}

.dark {
  --bg-primary: #18181C;
  --text-primary: #ECECEE;
}

这样只需要写一次组件，所有颜色自动跟随系统主题。

避免的坑

1. 不要滥用 @apply

@apply 很方便，但过度使用会让你的 CSS 和传统方法一样难维护。只在真正需要抽取重复模式时才用。

2. 组件化优先

把重复的 UI 模式抽成组件（Astro / React / Vue），而不是用 @apply 拼凑。

3. 善用 cn() 合并类名

import { clsx, type ClassValue } from "clsx";
export function cn(...inputs: ClassValue[]) {
  return clsx(inputs);
}

总结

Tailwind 不是银弹，但它是一个极其高效的工具。配合组件化思想和 CSS 变量，能构建出优雅且易维护的设计系统。