前言
最近公司正在籌備開發新的專案，對前端所使用的工具也進行了重新的評估與討論，在上一份專案裡，主要使用了NextJS + Styled-components進行開發。
然而經過一些討論和評估，最終我們決定在新的專案改用TailwindCSS 作為我們最主要的CSS Framework，於是也有了這篇文章～
底下主要是這段時間對TailwindCSS的一些整理和優缺點分析。
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，不管最終有沒有要使用，都還是很值得去他們官網了解一下！
