Tailwind CSS 与原子化设计：为什么开发者都在用

如果你还在写传统的 CSS 文件，也许该看看这个圈子正在发生什么。

什么是原子化 CSS？

原子化（Atomic）CSS 的核心思想很简单：一个类只做一件事。比如 text-center 只负责文本居中，text-red-500 只负责颜色。通过组合这些小类，而不是写大段样式，来构建界面。

/* 传统方式 */
.card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 原子化方式 */
<div class="p-6 rounded-lg shadow-sm">...</div>

为什么大家喜欢？

1. 不用起名字 —— 不用再纠结 .card-wrapper-inner 这种类名
2. 样式即文档 —— 看一眼 HTML 就知道长什么样
3. 按需生成 —— 没用到的样式不会被打包，体积更小
4. 设计约束 —— 预定义的间距、颜色体系，避免"随便写个 23px"

一段代码示例

// 结合 Vue/Nuxt 的响应式
const isOpen = ref(false)

// 模板里直接写
<button 
  class="px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-colors"
  @click="isOpen = !isOpen"
>
  切换
</button>

小结

Tailwind 不是银弹，但确实改变了很多人写 CSS 的方式。如果你还没试过，建议花半小时跑一遍官方文档，说不定会打开新世界的大门。

相关链接：

• Tailwind 官网
• Nuxt 文档