嗨各位大家好，我是搋兔～！ 相信大家一定都對我很陌生吧！

先來自我介紹一下，我是兔兔教的兔兔，我在「Tailwind CSS 臺灣」的職位是兔兔，而兔兔們的工作，是把世界變的到處都是兔子，然後翻譯並推廣 Tailwind。
 

「兔兔！什麼是 Tailwind CSS 呀?」

相信有在接觸前端領域的人或多或少都會聽過 Tailwind CSS，或是有一些人已經對它很熟悉、甚至是有用過了。

Tailwind CSS 是一個 Utility First 的 CSS 框架，它可以配合多種前後端框架，像是：

• Vue-CLI
• Vite
• Create React App
• Next
• Nuxt
• Laravel
• Gatsby
• ... and more ...

而為什麼可以被稱為排版神器？ 因為它真的很好用。(認真)

「排版神器的名號，你擔待的起嗎！」

其實不單單只是「好用」這麼模糊的說法，具體來說它的語法簡單好記、非常適合響應式設計 (RWD)、支援深色模式、適合與 Vue 及 React 一起做成元件、還可與 UI 設計保持視覺一致，且也很輕巧。

用過 Bootstrap 的人可能會納悶：「啊這跟我們大 BS 的 Utility Class 有什麼不同啊！ 不就 w-25、p-3 和 shadow-sm 這些嗎？！」

呃...嗯...，對。 (不想狡辯了)

其實，Utility Class 部分的概念是相同的。但不同於 BS，BS 雖然有很多元件可以直接幫元素加上 class 名稱就可以使用，但 Tailwind 沒有。(那不就表示更難用嗎XD)

可值得一提的是，雖然 Tailwind 並沒有很多預設好的元件，但正因為是要搭配現在的前端框架，所以特別適合與 Vue、React 等當作元件的一部份設計進去。 Bootstrap 令人不喜歡的地方就是雖然提供了很多元件可以使用，但實際使用時還是必須客製化、更多的客製化。 (齁，而且有時候還要用很重要很重要的 !important 把元件的預設樣式蓋掉啦！！)
 

「老闆，一份特製紅蘿蔔餐～」

而說到客製化，Tailwind 在這方面就很強了！
來給大家稍微舉例一下：

全功能性 Class (Utility Class)

完全採用功能性 Class 的 Tailwind，因為功能夠多，所以開發時不太需要混寫原生 CSS。

可客製化的設計系統

在 Tailwind 中，一切的功能性 Class隨你安排，從空間、間距、顏色、變化模式 (Variants) 等等都是可以自訂義的，你可以自訂整套系統能使用的樣式有哪些，也可以基於預設值額外新增你自己想要的數值設定。
 

「所以兔兔，這真的很讚嗎？」

所以其實不是我在說，Tailwind 真的很讚，用過就回不去了。之前翻譯 Tailwind 官網某一篇時，作者自己寫的：

「當你僅僅只透過預定義的功能性 class 來撰寫 HTML 樣式時，你就會意識到那生產力有多高，反而用以前的方式去寫會是一種折磨。」

就我用了 Tailwind 的一些時日以來，
真的。

哈哈哈哈，是沒有到那麼誇張啦，但是 Tailwind 真的會讓你的開發過程變得更加順暢，獲得良好的開發體驗，而不太想要回去寫一般的 CSS 或是 SASS。

「所以重點是什麼？」

我們前面有提到了 Tailwind 並沒有像 Bootstrap 有這麼多內建可以使用的元件，但是元件是可以自己做的呀！ 所以這 30 天的時間，和兔兔一起學習 Tailwind CSS 並做出有趣實用而且美美的元件吧！

好了，N 百字心得的業配文就到這邊，如果你不清楚到底什麼是 Utility Class 也不用擔心，我們明天會來介紹 Tailwind 的核心概念和特色功能，謝謝你們～
 

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

「俗話說狡兔有三窟，但其實兔子可能每天都在煩惱要睡哪窟啊啊啊...」