大家好，我卡颂。

从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」的。在他们看来，这就是开历史的倒车，还得额外记忆各种类名的含义。

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

设计系统

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

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

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

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

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

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

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

蓝湖界面

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

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

颜色约定

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

字体大小约定

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

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

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

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

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

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

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

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

这种情况下，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」将会大放异彩。