9. 工具类优先核心理念

工具类优先（Utility-First）不只是”把 CSS 写到 HTML 里”这么简单。它背后有一套完整的设计哲学。

一个生活化的比喻

传统 CSS 像是定制家具——你跟木匠描述想要什么样的桌子，他给你做一个。以后想换样式？再找木匠。

Tailwind 像是宜家买标准件——桌腿、桌面、螺丝都是现成的，你自己拼装。想换颜色？换个桌腿就行，不用拆整张桌子。

每个工具类就是一个标准件，只做一件事，可以任意组合。

为什么不用行内样式

刚接触 Tailwind 的人第一反应：这不就是行内样式吗？

看起来像，但有本质区别：

行内样式：

<div style="display: flex; padding: 1rem; background: #316ff6;">

Tailwind 工具类：

<div class="flex p-6 bg-[#316ff6]">

区别在哪？

1. 有约束的设计系统：行内样式可以写任意值 padding: 13px，Tailwind 只能选 p-1 到 p-96 的预设值。这保证了视觉一致性。

2. 响应式：行内样式没法写媒体查询，Tailwind 可以 md:p-8 lg:p-12。

3. 状态变体：行内样式不能写 :hover，Tailwind 可以 hover:bg-blue-700。

4. 文件体积：行内样式每个元素都重复，Tailwind 的工具类是全局复用的。

核心优势

不用起类名。这是最大的福利。你不需要纠结这个 div 叫 .card-wrapper 还是 .card-container，直接写样式就行。

样式不会泄漏。每个类只影响当前元素，不存在”这个 CSS 改了会不会影响其他页面”的担忧。

删代码很安全。删掉一个元素，它的样式就跟着走了，不用去 CSS 文件里清理残留规则。

CSS 文件不会无限增长。工具类都是复用的，新增功能不会让 CSS 文件线性膨胀。

什么时候不该用工具类

没有银弹。以下情况考虑跳出工具类：

一个样式组合在项目中出现 5 次以上。比如你的按钮样式 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 到处都在写，应该抽成组件（React/Vue）或者用 @apply 提取成 .btn。

超长的类名列表。一个元素挂了 20 个类名，读起来很痛苦。考虑拆分或者提取组件。

动态样式。颜色来自 API 数据库，用行内样式更合理：

<button style={{ backgroundColor: user.themeColor }} className="px-4 py-2 rounded">

处理样式冲突

两个类作用于同一个 CSS 属性时，后定义的生效（不是 HTML 里后写的那个）：

<div class="grid flex">  <!-- 最终是 display: grid，因为 .grid 在 CSS 里后定义 -->

解决办法很简单：不要写冲突的类，只保留你想要的那个。

如果确实需要强制覆盖，加 ! 后缀：

<div class="bg-teal-500 bg-red-500!">  <!-- 强制红色 -->

管理重复

工具类写多了，重复是不可避免的。几个应对策略：

循环渲染：同一个元素在模板里只写一次，用 v-for / map 循环输出。

多光标编辑：VS Code 里 Alt+Click 多光标同时编辑多个元素的类名。

提取组件：React/Vue 里把重复的 UI 抽成组件，类名只写一次。

自定义 CSS：极少数情况下，写点 CSS 完全没问题：

@layer components {
  .btn-primary {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-violet-500);
    padding-inline: --spacing(5);
    padding-block: --spacing(2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
}

下一章我们学状态处理——hover、focus 这些交互态怎么写。