用 Tailwind 來幫客戶實現高效整潔的CSS程式碼
什麼是 Tailwind CSS？
簡單來說 Tailwind CSS 是一套 Utility-First CSS，相當具有彈性，也非常適合快速刻板。在 Utility-First CSS 之間也算是殺出了一片天。不過這個工具的魅力到底在哪呢？且讓我慢慢說明。
Utility-First CSS
要說到 Utility-First CSS 的好，就要先從一般的 CSS framework 說起： 相信大家都對 Material-UI、Bulma、Bootstrap這類 component 都定義好好，套上去馬上就有個像樣網站的 framework 不太陌生。 要 navbar 有 navbar，要 button 有 button，的確是非常方便。 但是使用這些前端 framework 很快就會遇到一個很頭痛的問題：不想要自己的網站看起來一眼就是套框架，但是想要客製化的話，又會遭遇到維護上的麻煩跟困難，整理出以下情況與風險。
1. 直接改壞程式碼： override CSS
可能原本的框架沒有提供什麼比較好的 customize 的方式，或是自己選擇使用這些工具的方式導致很難 customize，只好各種 override 人家寫好的 CSS。但這種方式實在很容易把東西改壞。
2. 難以妥善交接：把customized code 載下來
若框架本身提供 customization，可以把各個地方修修改改再把 code 載下來。乍看之下好像很棒，但如果今天你手上的專案交給另一個人接手，他要如何知道哪些地方是原始的設定，哪些地方又被動過手腳了呢？
3. 客製化彈性低：import 後再 override Sass variables
比較好的情況，可以 import 框架的 Sass，但又 override 部分 Sass variables，不但可以調整設定，也不容易造成管理、維護的問題。但只要他已經把 UI 都定好了，可以調整的範圍往往就受到不少限制。
如果使用 Utility-First CSS 的時候，因為每個元件都要自己刻，哪裡不滿意、不符合需求，都可以在 utility class 加加減減中完成。
簡單來說就是使用 Utility-First CSS，非常具有彈性，可以更輕鬆地客製化，並降低上面列出的問題與風險。
Tailwind 的優勢
快速建構
Tailwind CSS 把大致上 CSS 會用到的屬性都用單個 class 來表示。
例如 .mt-1 對應的是 margin-top: 0.25rem;，.my-2 對應的是 margin-top: 0.5rem; margin-bottom: 0.5rem;，實在是簡潔太多。
因為可以直接把對應的 class 直接加在你想要作用的 element 上，大部分的情況下可以不需要自己動 stylesheet 的部分，相當方便。於是你就可以非常迅速地把網站的各種部分建構出來，也可以很輕鬆地調整。
如果還來不及在 local 新增專案、安裝 Tailwind，也可以先在 Tailwind.run嘗試看看使用的效果。
官方文件齊全
除了 Utility-First CSS 本身的好處以外，Tailwind CSS 雖然還不是十分被廣泛使用，但想要上手的話，光是官方文件就十分充足、一目瞭然。從 installation、每個 utility css 的簡介……甚至來有教學 screencasts可以看，真的非常用心。
Plugin擴充功能
Tailwind 也提供讓大家自己寫 plugin 擴充各種功能。可以透過 plugin 做到的事情很多，包含加上新的 utility、base styles、components 等等。
至於想要用第三方的 plugin 的話，可以看看 Awesome Tailwind CSS、Tailwind Toolbox上有沒有符合需求的 plugin。
除此之外，官方也有提供針對表單元件的plugin。現在的網站除非特別陽春，否則表單元件通常都不會讓他是原生醜醜的樣子，但如果每次刻板都要重頭改一次 input 的樣式是不符合效率的，因此相信這個 plugin 也是相當地實用。
什麼專案不適合 Tailwind？
任何工具都不會是絕對完美或是絕對適合所有專案，如果有以下狀況或需求，可能就比較不適合用 Tailwind：
1.只需要簡單的 UI，不希望花時間刻板（例如：後台管理...等等）
如果沒有這個時間、也沒有這個需求需要自己刻版，其實也沒什麼用 utility-first css 增加自己困擾的理由。
2. 網站需要支援較舊的 browser
As of v2.0, Tailwind CSS is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. Tailwind CSS v2.0 does not support any version of IE, including IE 11. If you need to support IE 11, we recommend using Tailwind CSS v1.9, which is still an excellent and very productive framework.
根據 Tailwind 的官方說明，v1 的 Tailwind CSS 不支援 IE9 以下的 IE 瀏覽器，v2 直接放棄支援任何 IE 瀏覽器版本。
這套工具在設計上本身就不太想顧慮到舊瀏覽器的支援，比方說大部分的單位都以 rem 為主，transform 的 utility classes 也直接用了 CSS variables 來實作。這個部分可能需要 override spacing 設定，transform 的部分也可以考慮自己寫 plugin。
總結
Tailwind 最大的優勢就是能夠彈性地客製化，如果客戶的網站有自己的 UI 設計，該設計又有高度客製化的版面需求時，在開發上不太可能全部手刻，會過於耗時；而一般的 CSS 框架亦無法滿足需求時，即可以使用 Tailwind 來替客戶實現前端的樣貌。
五倍紅寶石團隊具有豐富經驗的前端工程師，可以對應客戶的各種 UI 版面的需求，來規劃最適合您的前端實作方案。
想要閱讀更多來自五倍紅寶石軟體開發的技術分享？歡迎訂閱我們的月報，每月將自動幫你送上最新文章。