大家好，我卡頌。

從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」將會大放異彩。