小弟我之前一直是使用 Bootstrap 做為前端 CSS 框架，由於最近聽到很多 Tailwind CSS 的花式吹捧，讓我也開始感興趣了，今天就一起來研究一下吧！

架構與特色

官網 一開始就有說到，Tailwind CSS 是一個 utility-first 的框架，並且使用 PostCSS 做開發，而特色如下

utility-first

utility-first 即是說以共用 CSS 為主，像是 Bootstrap 中的 text-center 、 mx-4 等等

PostCSS

PostCSS 是使用 JavaScript 轉換 CSS 的工具，歸類為後處理器，與預處理器的 SASS 為兩種不同的東西，預處理器將撰寫好的 Code 編譯成 CSS，而後處理器則是把 Code 依照設定與插件做加工，實際上 Tailwind 的運行方式就是將 CSS 經過 PostCSS 內的 Tailwind 插件做加工，進而產出需要的檔案

VSCode 插件

用 VSCode 寫 Tailwind 時有很好的插件輔助，會依照 tailwind.config.js 提示可使用的 class

Tailwind 有許多 css 不認識的語法，所以撰寫上可能會有很多錯誤提示，可以在 settings.json 加入以下設定，想了解更多設定可以看 這裡

// settings.json
  "css.validate": false
安裝與編譯
安裝 tailwindcss、postcss 與 autoprefixer
$ npm install tailwindcss postcss autoprefixer
使用指令建立一個 tailwind.config.js
$ npx tailwindcss init
建立一個 css 檔案，並加入 Tailwind 基本程式碼
/* style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
將 style.css 編譯為 tailwind.css
$ npx tailwindcss build ./style.css -o ./tailwind.css
這邊的 tailwind.css 就是完整的 CSS 檔囉！
在看語法之前我們先看一下 Tailwind 的 CSS Reset，它採用的是 normalize 的版本，但在此之上又加了許多設定，以下有幾個比較重要的
區塊元素的 margin 為 0
h1 ~ h6 的字體大小與粗細同一般文字

有序清單與無序清單設定為無樣式
svg 與 img 等等圖像為 display: block
border 顏色預設 #e5e7eb，寬度為 0

當然還有其他的設定，詳細可以看官網，如果不想要這些設定則可以將 preflight 改為 false
// tailwind.config.js
module.exports = {
  corePlugins: {
   preflight: false
Tailwind 內有許多自己的語法，包含我們一開始看到的 @tailwind，還有其他像是 @apply 或 @layer 等等，以下會一一介紹，詳細也可以直接看官網
@tailwind
用來載入官方提供的樣式
編譯順序由上而下，改變載入位置同時也會改變順序
@tailwind screens 可省略，預設會載入在最後方

@tailwind base; /* 基礎樣式 */
@tailwind components; /* 模組樣式 */
@tailwind utilities; /* 共用樣式 */
@tailwind screens; /* 響應式樣式 */
@apply
用來將多個樣式合併，Tailwind 的模組化就是靠此功能實現
@apply 可與一般 CSS 一起使用
@apply 後方樣式編譯時不照順序排列，如要排列可使用多個 @apply
可直接 @apply 組好的 class 但 !important 不會繼承
如需繼承 !important 可直接寫在 @apply 最後方
/* Input */
.btn {
  background-color: #3b82f6 !important;
  @apply py-2 px-4;
  @apply font-bold rounded;
.btn-blue {
  @apply btn;
  /* @apply btn !important; 可將所有 class 加上 !important */
/* Output */
.btn {
  background-color: #3b82f6 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
.btn-blue {
  background-color: #3b82f6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
@layer
此功能會依照對應的圖層將 CSS 插入該處
可使用的圖層有 base、components 與 utilities
插入位置為該圖層最後方
如果要插入的圖層沒有載入，則 class 會直接放在原處
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    @apply text-2xl;
@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded;
@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    .filter-grayscale {
      filter: grayscale(100%);
@variants
可將 class 加上各種的效果，例如 focus、hover 等等
@variants 後方的順序影響 CSS 排列順序
tailwind.config.js 中可使用的 variant 這邊亦可使用
/* Input */
@variants focus, hover {
  .ares {
    color: #3b82f6;
/* Output */
.ares {
  color: #3b82f6;
.focus\:ares:focus {
  color: #3b82f6;
.hover\:ares:hover {
  color: #3b82f6;
@responsive
能產出響應式的 class
使用 @variants responsive { ... } 同樣也能做到該功能
/* Input */
@responsive {
  .ares {
    color: #3b82f6;
/* Output */
@media (min-width: 640px) {
  .sm\:ares {
    color: #3b82f6;
@media  (min-width: 768px) {
  .md\:ares {
    color: #3b82f6;
@media (min-width: 1024px) {
  .lg\:ares {
    color: #3b82f6;
@media (min-width: 1280px) {
  .xl\:ares {
    color: #3b82f6;
@screen
可將響應式的斷點以 tailwind.config.js 內定義的字串替代
/* Input */
@screen lg {
  .ares {
    color: #3b82f6;
/* Output */
@media (min-width: 1024px) {
  .ares {
    color: #3b82f6;
theme()
提供我們去查找 tailwind.config.js 內的參數
theme() 內需傳入字串，且同 JavaScript 使用 . 或 [] 查找
/* Input */
.ares {
  color: theme('colors.blue.500');
/* Output */
.ares {
  color: #3b82f6;
之前在寫 Bootstrap 的時候一值很喜歡用 utility class，實際讀過 Tailwind 之後發現這才是把 utility 發揮到極致阿！雖然沒有許多現成的 Component 可以用，不過這對於什麼都想自幹的人應該再適合不過了吧，接著下篇會來介紹它設定的部分～那就這樣啦～