写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。

编写CSS的姿势

时至今日，编写CSS有很多方式，也可以基于一些CSS框架来编写。比如2019年CSS状态报告中也有相关的统计:

或许你在项目中已经用了一些CSS方法论，比如BEM、Atomic CSS、OOCSS、SMACSS和ITCSS等，也体验过了在项目中引用社区中优秀的CSS框架，比如大家熟悉的Bootstrap、Foundation等。

随着一些优秀的JavaScript框架（比如，React和Vue）等出现，我们构建Web的方式也变了，也致使我们编写CSS的方式也不同了，社区中有很多关于CSS-in-JS的讨论，同样也有不同的方式方法：

如果你面对众多的编写CSS的姿势和管理维护方式感到困惑的话，建议你可以按照下图的流程来做选择：

有关于这方面的讨论，这里就不做过多的阐述了，如果你感兴趣的话，可以阅读：

• 写CSS的姿势
• React中编写CSS的姿势

虽然这些CSS方法都在试图着帮助我们解决CSS编写和管理的问题，但是如果我们能够编写实用程序类（Utility Class），然后在我们的代码库中重复使用它们，就会更容易一些。这些实用工具类是详尽的，可以作为padding、margin、font-size等方面的独立指南。

另外实用程序类（Utility Class）将解决重复样式的问题，因为我们不再需要编写任何自定义样式。此外，如果我们的UI风格遵循特定的标准，我们也可以在开发中遵循相同的标准。其中Tailwind CSS就是社区中目前具备这些特点的CSS框架之一。是不是对Tailwind CSS感到好奇，如果是的话，请继续往下阅读。

什么是Tailwind CSS？

Tailwind CSS官网是这么描述的：

一个实用的CSS框架，是一个高度可定制的，底层的CSS框架，它为你提供了所有的构建模块，可以快速构建定制设计，也不会有额外的自定义CSS需要去覆盖。

换句话说，Tailwind