What Tailwind CSS?
Tailwind CSS 是近年來較為熱門的CSS框架,那提到CSS框架就不得不提到幾乎無人不知的Bootstrap,然他們兩者本質上還是有很大的差異的。
Tailwind 是 Utility Framework ,而Bootstrap 則是 UI Framework。
不過本文礙於篇幅關係,並不會對此做太多的著墨,因為兩種框架的差異,已經很多人做過比較了,底下會直接切入Tailwind 本身。
Utility Framework 指的是Tailwind 已經將各種在撰寫CSS時會用到的功能寫成一個個獨立的class,而撰寫元件時便必須自己透過Tailwind提供的class,組合出想要的樣式。
像是mt-1
指的便是 margin-top:0.25rem
可以想像成Tailwind提供的是一整箱的樂高積木,使用者可以用這箱樂高積木隨心所欲組成各種物件,卻又不用自己把積木打造出來。
接下來會簡單列舉幾項這次會選擇Tailwind 很大的關鍵及優點。
功能優先(Utility-First)
相信大家過去在撰寫CSS時都有一樣的經驗,那便是:命名真的好難啊啊啊
如果是專案只有一個人在維護那倒還無所謂,但若是很多人同時維護,但又沒有事先規範好的情況,就會出現很多看不懂的className,抑或是一些很抽象的className,不管是在撰寫當下,還是後續維護,都是很大的問題。
而使用Tailwind之後,所有class 都是功能性的,不用再寫更多的css,也不用再為了想cassName而想破頭!!
樣式制定上有了規範
在使用Tailwind的同時,因為使用的都是官方制定好的樣式規範,便自然而然地寫出了受嚴格規範的網頁,也能有效避免在沒有規範的情況下隨意亂下各種inline style。
完整支援RWD 和偽類
過去在撰寫css 時,RWD 一直是比較麻煩的存在,畢竟要打的字也比較多XD
現在只需要使用Tailwind的前綴字如: md: w-32 , hover:text-red-600
不管是RWD還是hover,focus 等狀態都難不倒!
其實上述的優點在絕大多數的Utility-first framework 都是有的,但Tailwind 確實有比其他人更優異的部分!
接下來便來聊聊那些別人沒有的部分!
自己的規則自己訂
雖然Tailwind 已經提供了非~常~完整的Utility class 庫,但在開發專案時,不免俗需要制定一些自己的顏色主題,不開心的話,甚至整份Tailwind config重寫也是沒有問題的!
輕量化
Tailwind本身提供內建的purge 功能,只要設定完成,在build 階段會自動將沒有用到的style去除,最終build 出來的css檔案通常都不會超過10kb!
編輯器套件整合
Tailwind 本身提供那麼多class,若非長期使用,初期對於class的不熟悉,可能反而會造成撰寫速度的減慢,不過現在Tailwind本身已經有提供VScode 相對應的套件,能有自動題字和補字的功能,對VScode的使用者確實是一大福音!!
比起Styled-components呢?
上面提了那麼多Tailwind的優點,但都尚未提到團隊當初最主要的考量點。
說到這裡就必須先提提目前團隊正在維護的專案,因為元件化撰寫,每個Components都獨立配置一份style-components檔,雖然在撰寫時非常方便也有利於維持版面整潔與開發。
但最終就會造成專案檔異常肥大,且寫了大量重複的css 樣式,可想而知Build 出來的檔案也會同步肥大。
所以我們這次希望透過改用Tailwind來改善的問題便有以下幾點:
- 提升撰寫效率,減少撰寫重複多餘的css
- 減少專案內檔案數量
- 降低後續維護成本
- 減少專案Build 完的檔案大小
第一和第三項就Tailwind 本身的特性是可以預期的,透過class 的組合,不僅在元件本身所使用的style一目瞭然,對於減少重複的css也是肯定的!
但關於第二和第四項呢? 真的能減少專案最終Build完的檔案size嗎?
為此,我們簡單做了一個小實驗,用Tailwind 和 Styled-components 撰寫兩個一模一樣的元件,除了撰寫Style的方式不同以外,其餘條件都是一模一樣的,底下是實驗專案的架構:
最後的結果如下:
這裡要解釋一下,在SC組還是有一個74B的css 檔案主要是裡面還是有保留global.css 檔案來達到兩者的預設環境相同。
那就結果來說,在First Load JS 的檔案大小上TailwindCSS 確實減少了17.6%
這組實驗撰寫的僅是結構非常簡單的Card元件,那可以預期的是:
若落實整個專案皆使用Tailwind撰寫的情況下,檔案會明顯輕量!
缺點呢?
很現實的,沒有任何工具是絕對完美的。
Tailwind 最大的罩門便是沒辦法像撰寫CSS in JS 一樣可以傳入各種變數,並在Styled-components 本身進行運算等等…
這部分變得回歸過去透過classList 動態變更style 或是 inline style的方式來達成。
總結
確實沒有任何工具是完美或是絕對適合某些團隊的,但這事本身便是利弊的權衡,只要能符合使用狀況的工具,便是好工具。
順帶一提,Tailwind CSS 不僅近期越來越熱門,亦被各大論壇評選為2021 最推薦的CSS Framework,不管最終有沒有要使用,都還是很值得去他們官網了解一下!