開始之前，先別急燥哦，筆者帶大家了解一下挺好用又有趣的 @tailwind 如何操作吧！

環境建置時，筆者曾經提過，必須在輸入端的 CSS 檔案 (也就是文章中的 all.css) 中加入以下程式碼，並說明 @tailwind 相當於匯入功能。

@tailwind base;
@tailwind components;
@tailwind utilities;

那麼今天要來各別介紹以上三者之間的用法囉！

1. @tailwind base
   在 base 的區塊，通常是使用 HTML 標籤型的全域樣式，例如：

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Microsoft JhengHei", "Helvetica Neue", monospace, Arial, sans-serif;
};
h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
};

2. @tailwind components
   components 區塊則是針對單一 class 使用"多個"樣式才組成 components (元件)，此種場合常用在需集合樣式且高度重複使用的物件上，按鈕 button (btn) 是最好的例子。

.btn {
  margin: 4px 2px;
  padding: 6px 12px;
  color: #fff;
  background: #0d6efd;
};

3. @tailwind utilities
   utilities 的部分則強調單一 class 單一樣式，也就是相當於 tailwind 本身預設樣式的寫法。

.card-title-size {
  font-size: 48px;
};
.card-title-weight {
  font-weight: 700;
};

其實還有最後一種 @tailwind variant，這部分筆者還沒使用過，若對 hover 之類的 variant 沒特殊需求的話為預設載入；除此之外，base、components、utilities 務必記得要手動載入哦

另外還有一種使用方式，我們拿 @tailwind base 做舉例，除了像上述手刻 CSS 樣式之外也可以透過 @apply 借用 tailwind 的樣式，例如：

#手刻 CSS
h1 {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
};

#Tailwind CSS
h1 {
  @apply text-5xl font-bold
};

但使用 @apply 時須特別注意，若客製化樣式中有加上 !important，在 @apply 時會被取消 !important 效果。(官方解說)

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

如果真的想要在 @apply 的情況下保留 !important，只需要在 @apply 樣式後方加上 !important 即可。(官方解說)

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

還有一種情況，就是如果有使用 Sass/SCSS，則 !important 必須為賦予值的方式加入：

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

上述解說是筆者挑選能力範圍內可理解的功能進行講解，另外還有運用到 Vue 等框架的搭配或是比較少用的 theme，則不另外說明。

謝謝大家～下台一鞠躬