2021 年了，你不還來試試 TailwindCSS 嗎？

TailwindCSS 是一個 CSS 框架，旨在快速編寫樣式。

我第一感覺看到官網的介紹時，我想這不就是一個包含了很多樣式的樣式表嗎，和以前 bootstrap 這種那樣，他自帶了很多樣式，完了之後你直接用他自帶的就行了。

但是 TailwindCSS 並不只是這麼簡單。TailwindCSS 不僅是內置了很多樣式，也支持通過配置文件去配置，覆蓋掉內置的樣式，或者擴展自己的樣式，一般定制顏色居多。

TailwindCSS 最基本的使用方式，就是和之前 bootstarp 等 CSS 庫用法沒什麼兩樣，就是 class 上加各種類名。TailwindCSS 的類名都是由屬性縮寫 + 屬性程度 + [屬性值]。比如在默認情況下，TailwindCSS 對於數值分成幾個程度，每個程度為 0.25rem。如： mt-2 表示 margin-top: 0.5rem 。對於 opacity 等屬性還有屬性值，如 bg-opacity-30 表示 --tw-bg-opacity: 0.3; // e.g. background-color: rgba(0, 0, 0, var(--tw-bg-opacity));。（對於顏色、變換等，都會使用變量。）還提供了一些字面量，如 md sm 等用於響應式布局。

以上都是最基本的東西，好像看起來不過如此？而且根本記不住。沒事，有 Tailwind CSS IntelliSense ，寫類名飛快。對加練習，鐵定比 Emmet 寫得快。

通過配置 TailwindCSS，可以自定義很多屬性，如顏色。比如上圖的 bg-background-regular regluar 就是自定義的顏色，只要定義一次，之後在各個顏色樣式都能使用。如 text-regular border-regular。直 TailwindCSS 2.1 之後，開啟 JIT，還可以生成 raw 屬性的樣式。如 h-[40px] 就是把 40px 作為值了，是實時生成的。

那麼，說了這麼多了。寫了這麼多 class 到一個標籤上不會很亂嗎。這個時候，PostCSS + TailwindCSS 登場了。TailwindCSS 其實一個 PostCSS 的插件。PostCSS 都不陌生，用來對 CSS 進行各種預處理的。配置 PostCSS，就可以使用一些特殊語法了。比如在 css 文件裡使用 @apply 附加 TailwindCSS 樣式。如：

.test {
  @apply relative w-full h-[40px] bg-background-regular flex items-center justify-between px-4 truncate;
}

注：需要安裝 PostCSS Language Server 才能使用針對於 PostCSS 的補全。PostCSS 也是一種格式，擴展名為 .css .pcss

還有 @screen @components 等方法具體不再展開。

@screen desktop { /* @media(max-width: 1024px), 需要單獨配置 */
  .test {
    @apply bg-white;
  }
}

當然，PostCSS 也支持插件，可以擴展近似 SCSS 的語法。

好像，以上都沒有用？

最後，放大招了。相信很多切圖仔，每天就是對著圖稿切切圖。

打開 Figma，隨便找一個區域，選中，插件，Figma to Code, Tailwind 2。

¡ 爽！