使用 Tailwind 而非传统 CSS 的 6 个理由

1. 极小的包大小 = 极佳的性能

在开发模式下，Tailwind 的输出文件大小非常大。这是设计使然：所有可能的类都会在此阶段生成，因此当您想要使用某些内容时，无需等待构建过程完成。

然而，一旦 Tailwind CSS 进入生产模式，它就会使用名为 PurgeCSS 的工具清除tailwind.config.js所有未使用的类。它的工作原理是搜索项目文件中的类名，只保留那些用到的类。你可以在数组中配置要搜索的文件路径purge。

// tailwind.config.js
module.exports = {
  purge: [
    './src/components/**/**/*.jsx',
    './src/layout/**/**/*.jsx',
    './src/pages/**/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

无需费力，就能轻松获得非常小的 CSS 包大小，这确实有助于提升性能得分。要获得超过 10kb 的包大小非常困难，因此使用 Tailwind 的网站通常加载速度非常快，无需在 CSS 前端进行太多优化——只要网站的其他部分也进行了优化。

您需要做的就是确保始终使用全名引用类，而不是使用 JavaScript 构建名称。

// bad
<div className={ 'bg-' + props.isDark ? 'neutral-dark' : 'neutral-light' }>

// good
<div className={ props.isDark ? 'bg-neutral-dark' : 'bg-neutral-light' }

此外，虽然这在速度更快的机器上几乎不会被察觉，但 Tailwind 类的简洁性（因为它们并非使用复杂的选择器构建）意味着您的浏览器在解析和渲染 CSS 时会更快一些。这有助于提升速度较慢的电脑和旧手机的性能。作为一个 6 年前买手机时就已经很慢的人，我愿意尽一切努力来改进它。

2. 快速制作原型并构建

使用常规 SCSS，您需要为页面上的每个元素编写自定义类。虽然它可以提供更精细的控制，但编写自定义类需要相当长的时间：您必须在 HTML 中添加类，然后在 CSS 中创建它，最后以长格式写出每个属性。然后，您必须等待 CSS 构建完成才能看到结果——此外，如果您需要进行更多更改，则每次都需要重新构建，这可能会浪费宝贵的时间并打断您的工作流程。

Tailwind CSS 省去了这些额外的步骤，让您在设置元素样式时拥有简洁、流畅的开发者体验。您可以看到想要设置样式的元素，使用简写添加所需的属性，更改会非常快速地显示出来，无需等待 CSS 打包。您的注意力可以集中在一个地方，无需在不同的文件之间频繁切换，整个过程感觉非常简单。

<div class="bg-white rounded p-4">
  <h1 class="text-24 font-heading underline">
    Foobar
  </h1>
  <p class="text-16 font-body>
    Hello world!
  </p>
</div>

我可以理解学习所有简写可能需要一段时间。有一些很好的工具可以帮助解决这个问题，主要是官方文档或@nerdcave的Tailwind备忘单。但说实话，用了一周左右之后，你就会记住大部分重要的东西。有几个奇怪的陷阱，比如没有类flex-basis，但总有一个很好的理由：在这种情况下，你可以使用宽度属性来w-1/2代替它。这只需要一点时间，但有可能节省更多时间。

我在一些时间非常紧迫的生产网站上使用过 Tailwind，不得不说，它在设计前端样式方面确实减轻了很多压力。如果你的时间紧迫，Tailwind 可以让你的开发工作更轻松一些。

3. 自动处理 CSS 变量

Tailwind 会生成一个名为 的文件tailwind.config.js。此文件包含主题的所有设置，包括颜色、宽度、间距（用于填充、边距和类似属性）、字体等等。您的整个 CSS 包以及您使用的所有类都将基于此文件。

每个属性都可以分配一个名称，以便于引用关联的类。例如：

// tailwind.config.js

colors: {
  brand: {
    DEFAULT: '#f0000',   // bg-brand
    primary: '#f0000',   // bg-brand-primary
    secondary: '#f0000'  // bg-brand-secondary
}

// other ways to use these colours
.text-brand
.border-brand-secondary

您可以随时更改所有这些属性，除非您更改它们，否则名称将保持不变。因此，Tailwind 将处理您的所有 CSS 变量——它们会影响您网站的整体外观。这是您的真实来源——如果您更改了品牌颜色，或者您需要更改所有地方的字体，tailwind.config.js您都可以在这里进行更改。

4. 消除范围泄漏

人们喜爱 BEM 的一个特点，也是它如今如此流行的原因，在于它的命名系统类是为了表示组件的结构而构建的。这种结构不仅易于阅读和理解，而且开发者还能从中受益：由于布局易于理解，你可以在不使用 CSS 选择器的情况下编写类。

// this
.block {
  &__element { ... }
  &__element--modifier { ... }
}

// not this
.block {
  & > .element {
    &.modifier { ... }
  }
}

CSS 选择器的问题在于它们会给 CSS 带来复杂性，导致组件高度依赖于特定的 HTML 结构。由于诸如此类的通用 CSS 类名.container可能会重复出现，使用这些名称可能会导致重叠，更改一个类名会影响许多其他类名。这是我们使用 BEM 的主要原因之一，因为它使 CSS 结构清晰，并将每个类扁平化到顶层作用域，这样就不会依赖任何其他类名。如果没有这样的 CSS 方法论，工作起来可能会很麻烦，而尽可能保持简单意味着更多人更容易理解。

实用优先 CSS 的工作原理在于秉承这一理念：任何内容都不应依赖其他内容。在 Tailwind 中，类是单一用途的，通常仅由一两个 CSS 属性组成，并且除了特意为之的例外（例如组悬停功能）外，它们之间绝不会相互依赖。您甚至无需考虑作用域泄漏，因为除非您自己使用自定义 CSS 添加这些选择器，否则在复杂选择器中嵌套类的选项实际上并非内置功能。

// this is all tailwind classes are
.w-1/2 {
  width: 50%;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

// using hover groups
<div class="group bg-white hover:bg-black">
  <h3 class="text-grey group-hover:text-black group-hover:underline">Title</h3>
  <p class="text-grey group-hover:text-black"
</div>

我真正喜欢它的一点是，它不需要使用模糊、过于具体或随意的类名。你不需要为每种文本样式、每个随机的 CSS 形状或花饰都命名。同样，如果需要，你仍然可以自由地注释 HTML，但有时没有必要为只有display: flex.

如果我仍然需要使用选择器怎么办？

当然，有时选择器可能是最佳选择，例如用于设置所见即所得 (WYSIWYG) 块的样式，但通常避免使用选择器有助于维护易于阅读和理解的代码库。请记住，如果您愿意，仍然可以将 SCSS 与 Tailwind 一起使用。如果您确实需要使用选择器，前缀可以帮助您跟踪哪些是自定义 CSS，哪些不是。我喜欢使用这种方法来实现所见即所得 (WYSIWYG)：

// typography.scss

.t-wysiwyg {
   & p {
     font-size: 12px;
   }
   & strong {
     @apply font-bold;
   }
}

.t-wysiwyg--contact { ... }

5. 如果你需要，SCSS 仍然存在

请记住，您不必非要使用 Tailwind CSS来替代SCSS。有时您仍然需要创建一个使用 :before和:after元素的元素，或者需要自定义关键帧动画。在这种情况下，您可以像以前一样使用 SCSS 或任何其他预处理器——无需在两者之间做出选择。

我更喜欢用 Tailwind 来处理所有繁重的工作，而对于需要 CSS 功能的元素，我可以切换到 SCSS。这不仅让我能够更快地完成工作，还能保持高水平的质量、定制化和细节。

使用简写类名取代冗长、描述性的类名确实让人感到自由。不可否认，BEM 或类似方法的类名很有帮助——它能让你清楚地了解一个类的用途。至少理论上是这样。问题是，当每个元素都需要一个唯一的类名时，你最终会得到一些模糊、奇怪甚至愚蠢的类名。习惯没有类名描述可能会很困难，但一旦你很好地理解了语法，它就像阅读常规 CSS 一样，而且你随时可以在 HTML 注释中添加类名描述。

在我的另一篇文章《如何保持 Tailwind DRY》中，我探讨了如何利用 Vue 或 React 等 JavaScript 框架来构建真正符合实用优先工作方式的 DRY 应用程序。

<-- Contact Section - 2 column, 1 column on mobile -->
<div class="flex flex-row items-center">
  <-- Map -->
  <div class="w-full tablet:w-1/2">
    <img src="map.jpg" />
  </div>
  <-- Content -->
  <div class="w-full tablet:w-1/2">
    <h3></h3>
    <p></p>
    <ul></ul>
  </div>
</div>

6. 与 JavaScript 框架完美兼容

需要注意的是，Tailwind 在需要复制粘贴 HTML 的环境中并非 DRY 原则，所以如果您使用纯 HTML 文件，就别指望一切顺利。一旦您开始像这样复制粘贴，您就不再拥有一个可以更改组件外观的集中式数据源，因为您网站样式的数据源不再与 CSS 文件绑定。

Tailwind 的功能在现代 JavaScript 框架中大放异彩。这是因为像 Vue 或 React 这样的框架都致力于创建可复用组件，以最大限度地减少需要编写的 HTML 代码量。这些组件是应用程序的构建块，可以是一个简单的容器，也可以是由多个小组件组成的大型组件。

这些组件存储在它们自己的自定义文件中，这些文件结合了 HTML 和 JS，在 Vue 中，您还可以选择将 CSS 合并到单个文件中。这意味着您的数据源不再需要按文件类型分开，它们都可以存在于处理单个组件的同一个文件中。这就是所谓的基于组件的开发，JavaScript 框架张开双臂拥抱它：我们已经看到了 styled-components、CSS-in-JS 以及现在的 Tailwind，它们都有助于将与组件相关的所有 CSS 包含在该组件中。它们仍然可以拆分成不同的文件，但如果您想要更改该组件，您将直接转到该组件的文件夹，而不是三个单独的位置。

我在我的另一篇文章《如何爱上 Tailwind》中更详细地写了这个概念。

结论

我首先承认，Tailwind CSS 可能并非在所有情况下都是正确的选择。它确实有一些非常棒的功能，速度非常快，而且编译后的文件大小也非常惊人，但要想充分利用这些功能而不至于感到沮丧，需要一种完全不同的思维方式和一套工具。

我注意到很多团队，尤其是那些使用前端框架构建无头网站的团队，都在采用 Tailwind 及其类似的解决方案。我认为这种方法还处于早期阶段，还有很多需要探索的地方，但潜力巨大。我非常期待它未来的发展。