使用預處理器

由於 Tailwind 是 PostCSS 外掛程式，因此您可以像使用其他 PostCSS 外掛程式（例如 Autoprefixer）一樣，將其搭配 Sass、Less、Stylus 或其他預處理器使用。

請務必注意，您不需要在 Tailwind 中使用預處理器，因為您通常只會在 Tailwind 專案中撰寫極少的 CSS，因此使用預處理器並不像在撰寫大量自訂 CSS 的專案中那麼有益。

此指南僅作為需要整合 Tailwind 與預處理器的人員的參考，原因在於他們無法控制，而不是因為這是推薦的做法。

---

​使用 PostCSS 作為您的預處理器

如果您將 Tailwind 用於全新專案，且不需要將其與任何現有的 Sass/Less/Stylus 樣式表整合，您應該強烈考慮依賴其他 PostCSS 外掛程式來新增您使用的預處理器功能，而不是使用單獨的預處理器。

這有一些好處

• 您的建置將會更快。由於您的 CSS 不需要由多個工具進行解析和處理，因此您的 CSS 將僅使用 PostCSS 編譯得更快。
• 沒有怪癖或解決方法。由於 Tailwind 在 CSS 中新增了一些新的非標準關鍵字（例如 @tailwind、@apply、theme() 等），因此您通常必須以令人討厭且不直觀的方式撰寫 CSS，才能讓預處理器提供預期的輸出。專門使用 PostCSS 可以避免這種情況。

有關可用 PostCSS 外掛程式的相當全面的清單，請參閱 PostCSS GitHub 儲存庫，但以下是一些我們在自己的專案中使用且可以推薦的重要外掛程式。

​編譯時匯入

預處理器提供最實用的功能之一，就是將 CSS 整理成多個檔案，並透過預先處理 @import 陳述式，在編譯時將它們合併，而不是在瀏覽器中處理。

用於處理 PostCSS 的正規外掛是 postcss-import。

要使用它，請透過 npm 安裝外掛

npm install -D postcss-import

然後將它新增為 PostCSS 設定中的第一個外掛

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

關於 postcss-import 有一件重要的事情要注意，它嚴格遵守 CSS 規格，並且不允許在檔案最上方以外的任何地方使用 @import 陳述式。

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* Will not work */
@import "./components/card";

解決此問題最簡單的方法是在同一個檔案中，不要將一般 CSS 和匯入項目混在一起。相反地，為你的匯入項目建立一個主要入口點檔案，並將所有實際的 CSS 保存在個別檔案中。

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

你最有可能遇到這個情況的地方，是包含 @tailwind 宣告的主 CSS 檔案。

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

你可以透過為每個 @tailwind 宣告建立個別檔案，然後在你的主要樣式表中匯入這些檔案來解決此問題。為了簡化這個過程，我們提供每個 @tailwind 宣告的個別檔案，你可以直接從 node_modules 匯入。

postcss-import 外掛足夠聰明，可以自動在 node_modules 資料夾中尋找檔案，因此你不需要提供完整路徑，例如 "tailwindcss/base" 就夠了。

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

​巢狀

為了加入巢狀宣告支援，我們建議使用我們套件中的 tailwindcss/nesting 外掛，它是一個 PostCSS 外掛，包覆了 postcss-nested 或 postcss-nesting，並作為相容性層，以確保您選擇的巢狀外掛能正確理解 Tailwind 的自訂語法。

它直接包含在 tailwindcss 套件中，因此要使用它，您只需要在 PostCSS 組態中將它加入 Tailwind 之前的位置即可

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

預設情況下，它使用 postcss-nested 外掛，它使用類似 Sass 的語法，並且是 Tailwind CSS 外掛 API 中巢狀支援的引擎外掛。

如果您想使用 postcss-nesting（它基於進行中的 CSS Nesting 規範），請先安裝外掛

npm install -D postcss-nesting

然後在 PostCSS 組態中將外掛本身作為引數傳遞給 tailwindcss/nesting

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

如果您出於任何原因需要使用非常特定版本的 postcss-nested，並想覆寫我們使用 tailwindcss/nesting 本身套件的版本，這也可能會有幫助。

請注意，如果您在專案中使用 postcss-preset-env，您應該關閉巢狀並讓 tailwindcss/nesting 為您處理它

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

​變數

現今 CSS 變數（正式名稱為自訂屬性）已有非常好的 瀏覽器支援，因此您根本不需要預處理器就能使用變數。

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

我們在 Tailwind 本身廣泛使用 CSS 變數，因此如果您能使用 Tailwind，就能使用原生 CSS 變數。

您可能還會發現，您過去使用變數執行的大部分工作，都能以 Tailwind 的 theme() 函式取代，此函式讓您能直接在 CSS 中從 tailwind.config.js 檔案存取所有設計代碼。

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

在我們的 函式和指令文件 中深入了解 theme() 函式；

​供應商前綴

若要自動管理 CSS 中的供應商前綴，您應該使用 Autoprefixer。

若要使用它，請透過 npm 安裝它

npm install -D autoprefixer

然後將它新增到 PostCSS 組態中外掛清單的最尾端

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

---

​使用 Sass、Less 或 Stylus

為了獲得最佳的開發體驗，我們強烈建議您專門使用 PostCSS，並且不要在您的 Tailwind 專案中使用 Sass 或 Less 等預處理器。

若要將 Tailwind 與 Sass、Less 或 Stylus 等預處理工具搭配使用，您需要在專案中新增一個額外的建置步驟，讓您能透過 PostCSS 執行預處理過的 CSS。如果您在專案中使用 Autoprefixer，您已經設定了類似這樣的功能。

參閱我們的說明文件，了解如何將 Tailwind 安裝為 PostCSS 外掛程式，以進一步瞭解如何將 Tailwind 整合到您現有的建置流程中。

在使用 Tailwind 搭配預處理器時，最重要的觀念是Sass、Less 和 Stylus 等預處理器會在 Tailwind 之前單獨執行。這表示您無法將 Tailwind 的 theme() 函式的輸出提供給 Sass 顏色函式，因為 theme() 函式實際上是在您的 Sass 編譯為 CSS 並提供給 PostCSS 之後才會評估。

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

除此之外，有些預處理器在與 Tailwind 搭配使用時會有怪異的行為，以下會說明解決方法。

​Sass

在將 Tailwind 與 Sass 搭配使用時，若要將 !important 與 @apply 搭配使用，您需要使用內插才能正確編譯。

.alert {
  @apply bg-red-500 !important;
}

.alert {
  @apply bg-red-500 #{!important};
}

除此之外，除非用括號包住，否則 Sass 會對 Tailwind 的 screen() 函數產生問題。

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media (screen(md)) {
  .foo {
    color: blue;
  }
}

技術上來說，這樣會在媒體查詢周圍產生多餘的一組括號，但它仍然有效。

​Stylus

在 Stylus 中使用 Tailwind 時，你無法使用 Tailwind 的 @apply 功能，除非用 @css 包住整個 CSS 規則，這樣 Stylus 才能將它視為實際的 CSS。

.card {
  @apply rounded-lg bg-white p-4
}

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

不過這會帶來一個重大的代價，那就是你無法在 @css 區塊內使用任何 Stylus 功能。

另一個選擇是使用 theme() 函數取代 @apply，並以長格式寫出實際的 CSS 屬性

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

除此之外，除非你使用內插並用括號包住，否則 Stylus 會對 Tailwind 的 screen() 函數產生問題。

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

技術上來說，這樣會在媒體查詢周圍產生多餘的一組括號，但它仍然有效。