想明白这点，就知道 TailwindCSS 适不适合你

大家好，我卡颂。

从17年诞生至今，社区对TailwindCSS的接受程度不断提升：

一些使用过他的程序员大呼真香，而另一些程序员一听到他宣扬的原子化CSS理念就表示不能接受。

同样是程序员，为什么分歧这么大？这篇文章会分析问题形成的原因，给出建议，并预测TailwindCSS未来的走势。

欢迎围观朋友圈、加入人类高质量前端交流群，带飞

原子化CSS vs 语义化CSS

这篇文章不是TailwindCSS的科普文，但为了文章的完整性，有必要先介绍下TailwindCSS的核心理念 —— 原子化CSS。

元素样式是由一条条CSS规则构成的。对于如何组织CSS规则，可以分为两个流派：

语义化CSS（Semantic CSS）
原子化CSS（Atomic/Utility-First CSS）

先说语义化CSS，他很好理解，以下面这个class举例：

.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

即使我们没有其他信息，光看这段代码，也可以大体判断出 —— 这是一个聊天通知卡片的样式。

所以，对于采用语义化CSS规范的项目，重点在于如何为组件定义语义。这就诞生了很多类名定义规则，比如，下面是BEM(Block Element Modifier)规范的定义：

Block：块
Element：元素，是块的组成部分
Modifier：修饰符，表示一种形态/状态

对于警告状态的聊天通知卡片，符合BEM规范的类名为.chat-notification--warning。

原子化CSS则更关注CSS本身，上述聊天通知卡片用原子化CSS表达如下：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">...</div>

其中每个class代表一个定义好的CSS规则，比如：

p-6代表padding: 1.5rem; /* 24px */
bg-white代表background-color: white;

对于用惯了语义化CSS的开发者，一时是很难接受原子化CSS的。在他们看来，这就是开历史的倒车，还得额外记忆各种类名的含义。

之所以造成这种误解，是因为这里有个很重要的因素被忽略了 —— 设计系统。

设计系统

在互联网公司，页面的产出流程一般如下：

设计师根据公司需要，定义一套设计系统
根据设计系统的规范，设计师使用工具设计页面
前端工程师根据工具的标注，产出页面

所谓设计系统，就是对项目视图各个部分的约定，比如：

布局约定
配色约定
尺寸约定

为了减少前端工程师的上手门槛，这套页面产出流程对前端隐藏了设计系统的存在。

以国内前端常用的蓝湖举例，在前端界面选定元素后，右边界面会显示该元素的CSS规则。

使用时，不需要了解设计系统，只需要一键复制CSS规则，再粘贴到项目中就行：

蓝湖界面

这个操作逻辑完美契合了语义化CSS规范，简单高效。

而原子化CSS的本质是建立在设计系统的基础上。比如说在TailwindCSS中要定义颜色，需要通过类似text-red-50、text-red-100这样的类名，每个类名对应了设计系统中一种定义好的颜色：

颜色约定

字体大小、间距、布局等也是同样的道理：

字体大小约定

所以，如果公司采用了上述这套对前端屏蔽设计系统的开发流程，那么TailwindCSS无疑会增加前端的负担。这种负担的增加体现在：

需要学习TailwindCSS，从语义化CSS转换到原子化CSS`
需要学习设计系统的知识

更关键的是，后续接手的前端也得重新学一遍。

所以，如果这个开发流程不是公司自上而下规定的，就很难在团队推广开。

相对的，下面这几种情况比较容易接受TailwindCSS：

公司层面定义的开发流程中，设计师、前端工程师都要懂设计系统

这种情况下，设计系统本身就是设计师与前端工程师之间的共同语言，就不需要再经过设计工具（比如蓝湖、Figma）翻译成语义化CSS给前端：

没有专门的设计师（比如独立开发者或小公司），前端需要承担设计工作

这种情况下，TailwindCSS自带的设计系统能提供基本的设计约束。比如，不知道该选多大的字体时，只需要从如下几个类中选个合适的即可：

总结

学习TailwindCSS不仅仅是从语义化CSS到原子化CSS的思维转变，更是需要了解设计系统的概念。

如果习惯了对前端屏蔽设计系统的开发流程，要接受TailwindCSS需要一个自上而下的流程。

从趋势来看，TailwindCSS被接受程度也是逐年提升：

但我预测，这种增长趋势在未来某个时间点后会指数上升。这是因为，未来大部分的项目初始化代码会交给chatGPT完成，而原子化CSS相比语义化CSS能用更少的字符表达更丰富的样式信息。举个例子，对于下面的聊天消息卡片：

用语义化CSS表达，字符串长度是1033：

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

用原子化CSS表达，字符串长度是339：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

届时，当公司自上而下推进chatGPT生成代码时，原子化CSS更省token。

而刚才已经说了，要接受TailwindCSS（或者说背后的原子化CSS）需要的正是自上而下推动，这就是一个重要契机。

而在众多原子化CSS方案（比如还有UnoCSS）中，tailwindCSS发布时间最早（2017年），远早于GPT4用于训练的最晚数据集时间（2021.9）。这意味着GPT4在生成tailwindCSS代码时会更熟练。

届时，tailwindCSS为代表的原子化CSS将会大放异彩。