Tailwind CSS v1.7 支援了在 CSS @apply 偽元素和斷點的功能，真正實現了從 HTML 複製 class 到 CSS，就完成抽取 class 的操作。

不過是實驗性功能，要在設定開啟才能使用，可以先來體驗看看：

據說 v2 就會變默認開啟了

// tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
}

然後就可以在 CSS 裡這樣寫：

.btn {
  @apply bg-indigo-600 hover:bg-indigo-700;
}

補充一個 Tailwind CSS 設定的部分，在預設空的 Config 檔裡的 theme 屬性裡還有個 extend 屬性。其實兩個都可以設定，但結果有差異。假設現在要增加一個新的 sky-blue 顏色 到 colors 設定：

• theme：如果設定在 theme 下面，原本 Tailwind CSS 預設的顏色都會被覆蓋掉
• theme.extend：顧名思義 extend 就是繼承。設定在 theme.extend 下面，原本 Tailwind CSS 預設的顏色都會被繼承/保留下來

在 Theme Configuration - Tailwind CSS 有完整的介紹