这个问题的答案，不是 CSS-in-JS、不是 less/sass，也不是 CSS Modules。不是 Bootstrap、不是 Antd，也不是 Element-ui。

而是 TailwindCSS。

TailwindCSS 自诞生以来，一直褒贬不一。

有些人认为 TailwindCSS 名过其实了，它仅仅是简化版的内联 CSS 而已，它是一种技术的退化。

我并不认同这些观点，我认为他们并不是真的了解 TailwindCSS。

自 TailwindCSS 诞生以来，我就是 TailwindCSS 的用户，深度使用 TailwindCSS 长达 2 年左右，开发了十几款应用以及一个包含 80+ 组件的组件库。同时我还有在使用一些其他 CSS 方案，比如 SCSS、CSS-Modules、CSS-in-JS 库等。

在我的使用感受中，我认为 TailwindCSS 是目前最理想的样式解决方案。

而且 TailwindCSS 是目前最受关注和最受欢迎的 CSS 框架，这是不可否认的事实。

我不在本文中讲解 TailwindCSS 是怎么用的，因为它的上手成本真的非常低。

我会解释我喜欢 TailwindCSS 的理由，这些同时也是 TailwindCSS 的优点。请你认真看完，或许能够让你也成为 TailwindCSS 的用户。我相信通过使用 TailwindCSS，可以让你的下班时间提前。

不用再考虑为类命名

计算机的世界里有两大致命难题，其中一个就是命名。编写样式规则并不难，难的是为 class 命名。

在开发项目的过程中，你需要为 class 命名这件事考虑下面几个问题：

• 我们团队该用什么命名规范？
• 这个样式会多次使用吗？
• 多次使用这个样式是否额外需要处理兼容问题？
• 我会和其他样式组合使用它吗？会不会有冲突？
• ......

如果你在开发一个小型项目，或许不需要为这些问题烦恼。但如果你在开发一个具有上百个页面的大型复杂应用，你必须考虑这些事情。因为项目中的样式代码并不是一个人在用，而是要和团队成员一起使用。这会形成很大的认知负担。

TailwindCSS 解决了这个问题，我们完全不需要为 class 命名。一切 class 都是直观的。

不需要在样式文件和 HTML 文件之间切换

如果你的样式文件和 HTML 文件是分离的，那么在开发过程中，你需要频繁地切换文件。这是一件很花费时间和容易分散注意力的事。

使用 TailwindCSS，因为我们的样式都是内嵌到 HTML 中的属性，所以不需要进行文件的切换，这会显著提高我们的开发效率。

不需要关注优先级

在传统的样式解决方案中，我们可能会碰到各种让人烦躁的样式冲突问题。特别是当我们的 DOM 结构非常复杂，那就难免会写出很多复杂的选择器。而选择器是有优先级的，复杂的选择器，很容易就会让样式发生意外。这时我们通常会选择使用 !important 来解决问题，但这样很容易让样式变得复杂。

TailwindCSS 在这一点上做得非常好，因为它只需要关注当前的元素，你想修改样式，只需要改它的样式，不会对其他元素造成任何影响，所以也就没有优先级问题。

以内联的方式使用媒体查询、伪类、子选择器

传统的内联样式有一个问题，就是不能使用媒体查询、伪类和子选择器。

如果你在开发响应式应用，你需要编写媒体查询，并在其中为某些结构创建不同的选择器，这很麻烦。

TailwindCSS 可以将这些全部用内联的方式使用，不需要单独编写选择器。

天然的 CSS 体积优化

如果你维护过非常大的样式表，你应该会碰到这个的问题：一堆乱七八糟的样式，但是你不敢删，因为你不知道到底有没有某个页面在用它。

在 TailwindCSS 中，它会在构建过程生成你项目中所用到的 CSS，不会有任何一条多余的样式出现。而且它会最大可能复用样式，让样式的体积始终处于最小的状态。

非常容易维护

和上面的所有理由相比，TailwindCSS 最大的优势在于非常好维护。

我们可以肆无忌惮的修改某个页面或者某个组件的样式，而不用担心会不会有什么额外的影响。

这和传统的样式解决方案是不同的。

在传统的样式解决方案中，我们修改某个样式，可能需要在一堆文件中查找，会不会破坏某些东西，或者引起样式冲突。而修改之后的测试和验证将会更难。

这就是传统样式解决方案的问题：会让样式的维护难度随着项目的复杂度增加而一同增加。

但 TailwindCSS 不会受项目的复杂度影响。无论是 1 个人开发 10 个页面的项目，还是 100 个人开发 1000 个页面的项目，样式的维护难度几乎都是一样的。

总结

现在我说了 Tailwind CSS 大部分优势。

在技术层面，它和一些传统的样式解决方案相比显得有些简单。但是它在开发效率、可维护性和性能上都有着非常明显的优势。这也是事实。

如果你认为我讲的有道理，可以在下一个项目中使用 TailwindCSS。

你会不会和我一样认为 TailwindCSS 是 2022 年最完美的样式解决方案呢？欢迎说出你的想法。