這次2021 iThome鐵人賽得獎名單出爐啦，看了 @搋兔 寫的排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！
雖然僅僅只看了概念描述，並未實際操作過套件，但感覺是可以高度客製化 CSS 的排版神器!

過去開發套用 bootstrap 排版，主要會遇到的問題有：

• 為了要遵循設計規範，就要再用!important蓋掉原本 bootstrap 預設的樣式。
• bootstrap 樣式預設的尺寸比較少。
  例如：shadow 只有三種尺寸，shadow-sm/shadow/shadow-lg，但只有三種選擇，很容易不是畫面想要呈現的視覺效果，這時候就需要再自行撰寫程式。
  

結論或許 bootstrap 真的比較適合：不需要吸引人的視覺設計，僅需要呈現功能(畫面看起來不要太醜就好)，且會持續增加功能的專案，像是後台管理系統就很適合。

相對來說，TailWind CSS 看起來可以解決 bootstrap 排版上的問題

• class 可以編排到很細緻的外觀，像是寬度就有很多尺寸可以選擇。
  
• Hover、Focus 以及其他狀態，也都定義成 class name 了，可以直接寫在行內樣式裡。
  
  

缺點是行內元素寫起來會落落長

在了解 HTML 的結構時會有點干擾閱讀。關於這個問題文章裡也有提取成元件的相關說明，大家可以再自行去研究哦！

看起來，就算版面高度客製化的專案也可以使用套件了呢！

參考文章：
https://ithelp.ithome.com.tw/articles/10259688
https://tailwindcss.tw