我为什么用 Tailwind CSS 写样式

曾经我也觉得「在 HTML 里堆一堆 class」很丑。直到我真正用了一段时间 Tailwind，才发现它解决的恰恰是命名与维护这个最磨人的问题。

不用再起名字了

传统 CSS 最累的是给每个元素想 class 名：.card、.card-title、.card-title-active……Tailwind 把这一层直接省掉了。

<article class="rounded-2xl bg-white shadow-sm hover:shadow-lg transition">
  <h2 class="text-lg font-semibold">标题</h2>
</article>

样式即文档，所见即所得。

Tailwind v4 的变化

v4 把配置搬进了 CSS：

@import 'tailwindcss';

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', system-ui, sans-serif;
}

• 不再需要 tailwind.config.js（也仍兼容）；
• 构建更快，基于新的引擎；
• 通过 @tailwindcss/vite 插件接入，开箱即用。

暗色模式

配合一个 @custom-variant，暗色模式只需一个 class：

@custom-variant dark (&:where(.dark, .dark *));

然后 dark:bg-slate-950 就能生效了。本站的深浅色切换正是这么实现的。

小结

Tailwind 不是银弹，但对「一个人维护的项目」来说，它的开发体验真的很顺手。