使用 Tailwind CSS 的 6 个理由

1. 超小的文件束尺寸 = 令人难以置信的性能

在开发模式下，Tailwind的输出尺寸非常大。这是设计使然：在此阶段生成每个可能的类，因此当你想要使用某些东西时，无需等待完成构建的过程。

但是，一旦Tailwind CSS进入生产模式，就会清除所有未与PurgeCSS工具一起使用的类。这是通过在项目文件中搜索类的名称来实现的，只保留那些使用过的。你可以在purge
数组中的tailwind.config.js
中配置将搜索哪些文件路径。

// 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
的类，理由也很充分：在这种情况下，你可以只使用width
属性，例如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，其工作方式的理念是这样的：不依赖于其他任何东西。在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，我认为可以利用JavaScript框架，例如Vue或React，以一种实用优先的工作方式来构建真正的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环境中时，Tailwind将不会是DRY，所以如果你使用纯HTML文件，那就不要指望一切顺利。一旦你开始复制粘贴，你就不再拥有可以更改组件外观的中心数据源，因为网站样式的数据源不再与CSS文件相关联。

现代JavaScript框架是Tailwind功能真正发挥作用的地方。这是因为像Vue或React这样的框架基于创建可重用的组件，以便于最大限度地减少需要编写的HTML数量。这些组件是应用程序的构建块，可以是简单的容器，也可以是由较小的组件组成的大型组件。

这些组件存储在它们自己的自定义文件中，这些文件结合了HTML和JS，在Vue中，你也可以选择将CSS合并到一个文件中。这意味着你的数据源不再需要按文件类型分开，它们可以都存在于处理单个组件的同一个文件中。这就是所谓的基于组件的开发，JavaScript框架非常支持这种开发方式：我们有样式组件、CSS-in-JS和现在的Tailwind，这些都有助于包含与该组件内的组件相关的所有CSS。它们仍然可以拆分为不同的文件，但如果你想对该组件进行更改，你可以直接转到该组件的文件夹，而不是去三个不同的位置。

结论

我承认Tailwind CSS不是所有情况下的正确选择。它有一些非常棒的功能，速度快，并且可以编译成不可思议的小文件尺寸，但是它需要完全不同的思维方式和工具套组以便来利用这些功能。

感谢阅读！如果你觉得文章写的对你有帮助的话，也欢迎分享给你的朋友！