淺談 Tailwind CSS

7 min readMay 11, 2020

今天要為各位介紹的是 Tailwind CSS，這是最近比較熱門的CSS框架。Tailwind 跟其他的CSS Framework 不一樣， Tailwind 是Utility Framework, 而其他的 (Bootstrap, Bulma) 都是 UI Framework. 所以Tailwind 可以更客製化的，不會受到Framework 本身的style影響。也就是說它並不像其它 CSS 框架有多種的 UI 元件，而是提供各種好用的 class 工具來滿足各種介面情境。

如果各位有接觸過像是Material-UI、Bulma、Bootstrap的 framework，這類的 component 都定義好，套上去馬上就有個像樣網站的 framework 的確是非常方便。

但是使用這些 framework 很容易遇到一個問題：不想要自己的網站看起來像是套框架但又想要客製化的話，就會遇到一些麻煩：

首先可能原本的框架沒有提供好的客製化方式，或是自己使用這些工具的方式導致很難客製化，只好 override 人家寫好的 CSS。但這種方式久了容易把程式改壞。

再來是框架本身提供客製化，可以把各個地方調整後再把程式碼載下來。但如果今天你手上的專案交給另一個人接手，沒有人知道哪些地方是原始的設定，又有哪些地方經過調整？

但只要UI 都定好了，可以修改的範圍往往就受到限制。但如果使用 Utility-First CSS 的時候，的因為每個元件都要自己刻，哪裡不滿意、需要調整以符合需求，都可以在 utility class 調整中完成。非常具有彈性。

架構

Tailwind CSS 把大致上 CSS 會用到的屬性都用單個 class 來表示。像是 .my-2 對應的是 margin-top: 0.5rem; margin-bottom: 0.5rem;。

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

因為可以直接把對應的 class 直接加在你想要作用的 element 上，大部分的情況下可以不需要自己動 stylesheet 的部分，相當方便。這樣一來我們就可以非常迅速地把網站的各種部分建構出來，也可以很輕鬆地調整。如果還沒決定要不要安裝可以先在 Tailwind.run 嘗試看看。

官方資源齊全

Utility-First CSS 本身的優點外，想要上手 Tailwind CSS 的話，光是官方文件就十分充足。從安裝、每個元件的範例到教學 screencasts 都有資源可以看。影片內即時coding設計好UI的學習效果也還蠻不錯的。

缺點

剛開始用 Tailwind 以後，你會發現你的 html code 充滿了一大串像這樣的東西：

<div class="relative w-full h-48 bg-primary-200 overflow-hidden leading-48"> ... </div>

剛開始接觸時可能會覺看起來非常不習慣。但如果前端有使用 React 等框架並且把畫面上的組成準確的分成不同的 component，其實不用太擔心會有一堆重複的 utility class 混在一起。

與 inline CSS 的差異

這樣的表示方式其實跟 inline CSS 有點像，但其實 Tailwind 有一些隱藏的優點，是 inline CSS 很難辦到的：

1. 遵循規範

相信新手剛開始學寫網頁的時候，都會有這樣的經驗，常常會隨心所欲地修改 padding、margin，40px 還是 50px。後來開始工作以後，才會體悟到原來這些數字不能隨便調整。如果沒有對這些數值有一定的規範，各個 component 搭配起來，最後呈現給使用者的畫面也會出現視覺上的平衡問題。

如果全部寫 inline CSS，是很難去注意有沒有哪裡違背了定義好的規範。要一一去對數值跟色碼有沒有寫對，太過辛苦也不實際：

<div style="width: 100%;padding-top: 64px;padding-bottom: 160px;">
  <div style="padding: 24px;">
    <h1 style="font-size:20px;color:#2d3748;font-weight: 400;">
      <!-- ....  -->
    </h1>
    <div style="margin-top:64px;color:#718096;">
       <!-- ...  -->
    </div>
  </div>
</div>

改用 Tailwind CSS 以後，顏色、spacing 等等都是用 config 來做管理，可以比較嚴格地規範可以使用的數值和色碼，避免沒有規範地隨意下 padding、加 background-color 等等。

<div class="w-full pt-18 pb-40">
  <div class="p-8">
    <h1 class="text-xl text-green-600 font-normal">
      ...
    </h1>
    <div class="m-18 text-blue-400">
       ...
    </div>
  </div>
</div>

2. Responsive

inline css 基本上做不到 Responsive Web Design，因為包含 @media 的 rules 是無法放在 inline css 裡的。

在使用 Tailwind CSS 的時候，只要這個 utilty class 的 responsive variant 有被打開，就會產生像是底下的 CSS classes：

/* Original utilty class */
.w-1\/4{
  width: 25%;
}/* 生成的 CSS class */
@media (min-width: 896px){
  .lg\:w-1\/4{
    width: 25%;
  }
}@media (min-width: 1280px){
  .xl\:w-1\/4{
    width: 25%;
  }
}

於是就可以簡單地使用 .xl:w-1/4 .lg:w-1/4 等 classes 來做 responsive design。

3. Pseudo-classes

要透過 inline css 加上 :hover, :active 也是辦不到的。但是 Tailwind 提供 hover、focus、active、disabled、visited、first-child …… 等 variants。讓你可以很容易地加上對應的 utility class，就能得到 hover、active 等效果。

誰不適合 Tailwind？

任何工具都不會是絕對完美或是絕對適合所有族群：

1. 網站需要支援較舊版本的瀏覽器

Tailwind on the other hand is a low-level utility framework, where most of the classes map directly to individual CSS properties. This means that which browsers you support is really up to you, not the framework.

根據 Tailwind 的官方說明，browser 支援度這件事情取決於個人。畢竟知道要支援到 IE9 的人，就會知道不該用 flexbox、:focus-within 等等。

2. 不擅長從零的新手

如果是不擅長刻板的新手，又要在時限內地交出專案，utility-first css 應該都會用得蠻有壓力的。

3. 只需要簡單的 UI，不希望花時間刻板

如果沒有這個時間、也沒有這個需求需要自己刻版，其實也沒什麼用 utility-first css 增加自己困擾的理由。

總結

本文對Tailwind.css的介紹尚未深入到安裝以及實際操作範例。但因其內容和功能非常豐富，當你看到官網的介紹時相信你會對它感興趣，而且從其Github目前的star數 22.7k 來看，證明像是 Tailwind CSS 的 Utility-First CSS 應該會越來越受歡迎喔