Tailwind CSS好用嗎？開發完一套產品的心得

我也不是在幫Tailwind CSS推銷，只是無聊寫來分享，因為最近的一套產品就是用這個當框架寫。

Tailwind CSS是什麼

Tailwind CSS是一個CSS框架，如Bootstrap之類的，但他是屬於收費性質的，商業用途需要購買授權。

這個是Bootstrap的另一個選擇，官方預設是使用在React上但也以使用在Angular上。我是用Angular開發。

反正只要知道CSS怎樣寫HTML怎樣寫，Angular和React殊途同歸，都是要把HTML+CSS在適當的時候顯示適當的格式。

優點

這點我很喜歡，他的語法結構很漂亮，如：m-1、mt-1、mt-[10px]，text-blue-900，print:hidden。

尤其用grid，然後可以從螢幕小的開始設定col-span-12 sm:col-span-6 md:col-span-3 print:hidden，這樣手機會一個一列、平板會兩個一列、電腦會4個一列，然後列印的時候隱藏。

然後文字可以 text-black dark:text-white，設定原本是黑色在亮版，然後暗黑模式是白色。

缺點

其實他的範例很少有Angular的，所以UI都得手動寫，寫UI相當累。尤其是下拉控制項、下拉日期控制項。

當然有Angular Material可以用，但下拉如果要多欄呢？然後日期如果要民國年呢？用現成的就相當難辦。

然後他沒有內建ICON，所以我使用的時候是混搭Angular Material，用ICON和Modal的功能。

這樣混搭檔案大小還好，不會太大，寫了整個產品也才快700KB。

結論

未來我們公司還會繼續用Tailwind CSS做一些專案，但會與PrimeFlex兩個做抉擇，選擇適合的。

如果不需要PrimeNG的大概就用Tailwind CSS。