寫CSS有些年頭了，經歷了不同的時期用不同的姿勢來編寫CSS，其目的就是給Web元素添加樣式。愛掏網 - it200.com但編寫樣式著實令人感到煩惱，甚至是效率低下，成本極高。愛掏網 - it200.com也正因如此，社區中有很多CSS方法論和框架來幫助開發快速有效編寫CSS。愛掏網 - it200.com雖然這些方法論和框架有助于我們快速編寫CSS，構建UI組件，但也有令人感到頭痛之處，比如冗余的代碼，代碼的覆蓋等。愛掏網 - it200.com隨著功能第一（Utility-First）CSS的出現，讓我看到了編寫CSS的另一種有效的方式，該方式也被認為是現代Web中構建Web界面最好的選擇。愛掏網 - it200.com其中Utility-First CSS的典型作品之一就是Tailwind CSS。愛掏網 - it200.com接下來，我們就來了探討Tailwind CSS，我們將了解基于組件的樣式有哪些問題，以及為什么要基于Utility-First CSS來構建組件。愛掏網 - it200.com
時至今日，編寫CSS有很多方式，也可以基于一些CSS框架來編寫。愛掏網 - it200.com比如2024年CSS狀態報告中也有相關的統計:
或許你在項目中已經用了一些CSS方法論，比如BEM、Atomic CSS、OOCSS、SMACSS和ITCSS等，也體驗過了在項目中引用社區中優秀的CSS框架，比如大家熟悉的Bootstrap、Foundation等。愛掏網 - it200.com
隨著一些優秀的JavaScript框架（比如，React和Vue）等出現，我們構建Web的方式也變了，也致使我們編寫CSS的方式也不同了，社區中有很多關于CSS-in-JS的討論，同樣也有不同的方式方法：
如果你面對眾多的編寫CSS的姿勢和管理維護方式感到困惑的話，建議你可以按照下圖的流程來做選擇：
有關于這方面的討論，這里就不做過多的闡述了，如果你感興趣的話，可以閱讀：
- 寫CSS的姿勢
- React中編寫CSS的姿勢
雖然這些CSS方法都在試圖著幫助我們解決CSS編寫和管理的問題，但是如果我們能夠編寫實用程序類（Utility Class），然后在我們的代碼庫中重復使用它們，就會更容易一些。愛掏網 - it200.com這些實用工具類是詳盡的，可以作為padding、margin、font-size等方面的獨立指南。愛掏網 - it200.com
另外實用程序類（Utility Class）將解決重復樣式的問題，因為我們不再需要編寫任何自定義樣式。愛掏網 - it200.com此外，如果我們的UI風格遵循特定的標準，我們也可以在開發中遵循相同的標準。愛掏網 - it200.com其中Tailwind CSS就是社區中目前具備這些特點的CSS框架之一。愛掏網 - it200.com是不是對Tailwind CSS感到好奇，如果是的話，請繼續往下閱讀。愛掏網 - it200.com
Tailwind CSS官網是這么描述的：
換句話說，Tailwind CSS是一個基于實用程序的底層CSS框架，旨在簡化Web應用程序的構建，提高事度，減少編寫定制CSS的關注，而不需要離開HTML代碼的舒適區，同時實現出色的界面。愛掏網 - it200.com
比如官網首頁提供的示例，只需要使用幾個類就可以設計出不同的卡片效果（不需要總是聲明一個大的類來獨立于你的HTML和寫一堆屬性來制作一些東西）：
Erin Lindford
Customer Support
erinlindford@example.com
(555) 765-4321
而且只需要改變HTML中的類名，就可以達到不同的效果：
其他CSS框架（比如我們熟悉的Bootstrap、Foundation、Bulma等）提供了各種預定義組件（比如Modal、Button、Alert和Card等）。愛掏網 - it200.com但是有了Tailwind CSS，可以自己做，或者你被迫根據你的項目模型自己做。愛掏網 - it200.com換句話說，你實際上擁有了組件，你可以在你選擇的任何組件上利用你的定制能力。愛掏網 - it200.com這意味著不再需要與框架斗爭，也不需要試圖找出需要覆蓋哪些類才能獲得最初目標的結果。愛掏網 - it200.com
Tailwind CSS不像Bootstrap
當你看到CSS框架一詞時，我想你馬上會想到Twitter的 Bootstrap （或類似于Bootstrap的CSS框架）。愛掏網 - it200.com但它們之間還是存在很大的差異的，其中最大的差異就是：Bootstrap是一組可設定樣式筆主題的組件，Tailwind 是一組可配置的實用CSS類；Bootstrap幫助你預構建組件，Tailwind為你提供了快速構建自己組件。愛掏網 - it200.com
用一個按鈕的示例來展示他們之間的區別。愛掏網 - it200.com
先來看HTML代碼：
可以看到，在Bootstrap中，HTML要簡潔的多，所以你可能會問，既然Bootstrap更簡單，為什么不使用它呢？為了回答這個問題，我們來設想有這么一個場景：“如果你想讓按鈕在特定的頁面（或組件）上稍微小一點”？你是否想要為這種獨特的情況創建一個新的類，比如Bootstrap中的.btn-sm。愛掏網 - it200.com在這種情況下，在Tailwind CSS中只需要使用不同的padding類，比如py-1。愛掏網 - it200.com相比之下要比Bootstrap容易地多，而且你不需要去修改或增加任何CSS代碼，而只需要調整HTML中class的值。愛掏網 - it200.com
而且在Tailwind CSS中和Bootstrap（或類似于Bootstrap的其他CSS框架）最大的不同，在class中可以設置一些狀態的類，比如hover:bg-blue-600。愛掏網 - it200.com這在Bootstrap中從未有過的特性和功能。愛掏網 - it200.com
另外，在Tailwind CSS中也提供了創建類的可能性，比如在HTML文件中重復多次使用的組，以為該組件創建一個類，比如.btn-blue。愛掏網 - it200.com那么在Tailwind CSS中可以像下在這樣使用：
有關于這方面的具體使用，后續會花更多的時間來和大家一起探討。愛掏網 - it200.com
接下來，我們再來看一下Bootstrap和Tailwind CSS兩個框架中CSS的差異性。愛掏網 - it200.com同樣拿上面的按鈕Demo為例：
我想你在上面的截圖中已經看出他們之間的差異了：Bootstrap中類的樣式是一個集合（會有一個或多個樣式）；而Tailwind CSS中的每個類對應的僅是一個樣式。愛掏網 - it200.com
Tailwind CSS不像 Atomic Design
Tailwind CSS也不像 Atomic Design。愛掏網 - it200.com了解Atomic Design的同學都知道，在Atomic Design系統中，可以將元素劃分為最小單元體，將其稱為元子，這些元子可以組合成最終的頁面。愛掏網 - it200.com
但Tailwind CSS的類特別像Atomic Design中的 Atoms。愛掏網 - it200.com前面的示例可以獲知，在元素上運用很多個不同類就能達到想要的UI，甚至是頁面的效果。愛掏網 - it200.com但在Tailwind CSS中這些類不被稱為是Atoms 類，而是被稱為實用性類（Utility Class）。愛掏網 - it200.com
Tailwind CSS不像 OOCSS
Tailwind CSS也不像OOCSS（Objec