我的 Tailwind CSS 之旅：从怀疑到务实

几年前第一次接触 Tailwind CSS 时，我的第一反应是怀疑：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

习惯了传统 CSS 实践——关注点分离、语义化类名、BEM——这看起来像是倒退回了内联样式。我想不通为什么有人愿意让几十个工具类堆满 HTML 模板。

那时候组件库也很笨重：许多交互组件需要庞大的框架运行时，暗色模式支持更像是事后补丁。我把 Tailwind 归为“不适合我”，继续用 CSS modules 和自定义样式表。

什么改变了：维护的现实

最终迫使我重新审视的并非炒作，而是自定义 CSS 在日益增长的副项目中的维护成本。

在之前使用 CSS modules 的配置中：

• 调整间距或字重意味着要在模板和样式表之间来回跳转。
• 暗色模式需要在多个文件中维护自定义属性，很容易漏掉边界情况。
• 小规模重构常常因为细微的层叠问题而意外破坏无关的 UI 组件。

当 Tailwind 发布第 4 版并改善了原生 JavaScript 和暗色模式的使用体验后，我决定在一个有分量的项目上认真测试它。

为什么它打动了我

1. 一致的设计约束

我最大的误解是以为 Tailwind 只是“写在 HTML 里的 CSS 简写”。

实际上，Tailwind 是一个受约束的设计系统。写 space-y-4 或 text-gray-600 dark:text-gray-300 时，你是在从预定义的、协调统一的调色板和间距刻度中做选择。你不需要凭空发明像素值，也不用纠结外边距该用 14px 还是 16px。

2. 零层叠副作用

使用工具类时，每个样式都直接作用于对应元素。在一个视图中修改卡片布局，绝不会意外破坏另一个视图中的卡片。

如果某个工具类组合频繁出现，现代 CSS 允许将其提取为标准的 @utility 或 @layer components 规则：

@import "tailwindcss";

@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);
    box-shadow: var(--shadow-md);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
}

3. 无痛的暗色模式

过去，在整个应用中实现暗色模式需要花费数天时间重构自定义属性。借助 Tailwind 的 dark: 修饰符，暗色模式变体与亮色模式定义并排放在一起。为整个项目添加暗色模式只需几个小时。

总结

Tailwind 并非适用于所有场景——复杂图形、定制动画和高度动态的布局引擎仍然需要原生 CSS。

然而，对于日常的 Web 应用开发（表单、仪表盘、导航、卡片），Tailwind 消除了命名 CSS 类和调试优先级冲突的脑力负担。它让我花更少的时间设计样式表，更多的时间交付功能。