用 Tailwind 和设计变量管理视觉一致性

变量先于组件

很多项目一开始就急着封装组件，但视觉不一致的问题往往来自颜色、间距、圆角和边框没有统一语言。

先定义变量，可以让后续组件自然保持一致。

中性色更耐看

内容站点不需要强烈色块。背景、前景、边框、muted、accent 这些基础变量就能覆盖大多数场景。

深色模式的关键

深色模式不是简单反转颜色。它需要重新考虑对比度、边框透明度和代码块背景，否则阅读会变得费力。

Tailwind 的价值

Tailwind 适合把变量直接映射到语义类名里。组件写的是 bg-background、text-muted-foreground，而不是具体颜色值。

小结

设计变量让视觉决策集中，Tailwind 让使用成本降低。两者结合，可以用很少的代码维持长期一致性。