Tailwind CSS 使用預(yù)處理器

使用預(yù)處理器

一個使用 Tailwind 與常見的 CSS 預(yù)處理器，如 Sass，Less 和 Stylus 的指南

由于 Tailwind 是一個 PostCSS 插件，沒有什么可以阻止您使用 Sass，Less，Stylus 或其他預(yù)處理器，就像您可以使用其他 PostCSS 插件，如 Autoprefixer。

重要的是要注意，您不需要在Tailwind中使用預(yù)處理器—您通常在 Tailwind 項目中寫很少的 CSS，所以使用預(yù)處理器并不像在一個您寫了很多自定義 CSS 的項目中那樣有利。

本指南只是作為一個參考，供那些需要或想將 Tailwind 與預(yù)處理器整合的人使用。

使用PostCSS作為您的預(yù)處理器

如果您在一個全新的項目中使用 Tailwind，并且不需要將它與任何現(xiàn)有的 Sass/Less/Stylus 樣式表集成，您應(yīng)該高度考慮依靠其他 PostCSS 插件來添加您所使用的預(yù)處理器功能，而不是使用一個單獨的預(yù)處理器。

這有幾個好處。

• 您的構(gòu)建速度會更快。因為您的 CSS 不需要被多個工具解析和處理，所以只使用 PostCSS，您的 CSS 會編譯得更快。
• 因為 Tailwind 添加了一些新的非標(biāo)準(zhǔn)關(guān)鍵字到 CSS 中（如?@tailwind?, ?@apply?, ?theme()?等），您經(jīng)常不得不用煩人的，不直觀的方式來寫您的 CSS，以得到一個預(yù)處理器給您預(yù)期的輸出。而使用 PostCSS 則可以避免這種情況。

關(guān)于可用的 PostCSS 插件，請參見 PostCSS GitHub repository，但這里有幾個重要的插件，我們在自己的項目中使用，并且可以推薦。

構(gòu)建時導(dǎo)入

預(yù)處理器提供的最有用的功能之一是能夠?qū)⒛?nbsp;CSS 組織成多個文件，并在構(gòu)建時通過提前處理 ?@import? 語句而不是在瀏覽器中結(jié)合它們。

用于處理 PostCSS 的規(guī)范插件是 postcss-import。

要使用它，請通過 npm 安裝該插件：

npm install postcss-import

然后把它作為 PostCS 配置中的第一個插件：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

關(guān)于 ?postcss-import?，需要注意的一個重要問題是，它嚴(yán)格遵守 CSS 規(guī)范，不允許在任何地方使用 ?@import? 語句，除非在文件的頂部。

無法工作，@import 語句必須放在第一位。

/* components.css */

.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

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

解決這個問題最簡單的方法就是永遠(yuǎn)不要在同一個文件中混合常規(guī) CSS 和導(dǎo)入。取而代之的是，為您的導(dǎo)入文件創(chuàng)建一個主入口文件，并將所有實際的 CSS 保存在單獨的文件中。

為導(dǎo)入和實際的 CSS 使用單獨的文件。

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

/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

/* components/card.css */
.card {
  @apply p-4 bg-white shadow rounded;
}

您最可能遇到這種情況的地方是在您的主 CSS 文件中，其中包括您的 ?@tailwind? 聲明。

無法工作，@import 語句必須在前面。

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

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

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

您可以通過為每個 ?@tailwind? 聲明創(chuàng)建單獨的文件，然后在主樣式表中導(dǎo)入這些文件來解決此問題。為了簡化這一點，我們?yōu)槊總€開箱即用的 ?@tailwind? 聲明提供了單獨的文件，您可以直接從 ?node_modules ?導(dǎo)入這些文件。

?postcss-import? 插件非常智能，可以自動在 ?node_modules ?文件夾中查找文件，因此您無需提供整個路徑——例如?“tailwindcss/base”?就足夠了。

導(dǎo)入我們提供的 CSS 文件

您可以通過把您的 ?@tailwind? 聲明放在他們自己的文件中來解決這個問題。為了方便，我們?yōu)槊總€ ?@tailwind? 聲明提供了單獨的文件，您可以直接從 ?node_modules? 導(dǎo)入。

@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 并充當(dāng)兼容層，以確保您選擇的嵌套插件正確理解 Tailwind 的自定義語法，例如?@apply? 和 ?@screen?。

它直接包含在 ?tailwindcss ?包本身中，因此要使用它，您只需將其添加到 PostCSS 配置中，位于 Tailwind 之前的某個位置：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

默認(rèn)情況下，它在后臺使用 postcss-nested 插件，該插件使用類似 Sass 的語法，并且是 Tailwind CSS 插件 API 中支持嵌套支持的插件。

如果你更喜歡使用 postcss-nesting（它基于工作中的 CSS 嵌套規(guī)范），首先安裝插件：

npm install postcss-nesting

然后將插件本身作為參數(shù)傳遞給 PostCSS 配置中的 ?tailwindcss/nesting?：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

如果出于某種原因您需要使用一個非常特定版本的 ?postcss-nested? 并且想要覆蓋我們與 ?tailwindcss/nesting? 本身捆綁的版本，這也會很有幫助。

請注意，如果您在項目中使用 postcss-preset-env，則應(yīng)確保禁用嵌套并讓 ?tailwindcss/nesting? 為您處理它：

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

變量

如今，CSS 變量（官方稱為自定義屬性）具有非常好的瀏覽器支持，因此您根本不需要預(yù)處理器來使用變量。

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

/* ... */

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

我們在 Tailwind 本身中廣泛使用 CSS 變量，因此如果您可以使用 Tailwind，則可以使用原生 CSS 變量。

您可能還會發(fā)現(xiàn)，您過去使用變量的大部分內(nèi)容都可以替換為 Tailwind 的 ?theme()? 函數(shù)，該函數(shù)使您可以直接在 CSS 中訪問 ?tailwind.config.js? 文件中的所有設(shè)計標(biāo)記：

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

供應(yīng)商前綴

要在 CSS 中自動管理供應(yīng)商前綴，您應(yīng)該使用 Autoprefixer。

要使用它，請通過 npm 安裝它：您可以使用 postcss-preset-env 插件為您的項目添加對即將到來的 CSS 特性的支持。

npm install autoprefixer

然后將它添加到 PostCSS 配置中插件列表的最后：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

使用 Sass、Less 或 Stylus

要使用 Tailwind 的預(yù)處理工具，如 Sass，Less，或 Stylus，您需要添加一個額外的構(gòu)建步驟到您的項目中，讓您通過 PostCSS 運行您的預(yù)處理 CSS。如果您在項目中使用 Autoprefixer，您已經(jīng)有了類似這樣的設(shè)置。

確切的說明將取決于您使用的構(gòu)建工具，所以請參閱我們的安裝文檔來了解更多關(guān)于將 Tailwind 整合到您現(xiàn)有的構(gòu)建過程中。

關(guān)于使用 Tailwind 與預(yù)處理器的最重要的事情是，預(yù)處理器，如Sass，Less和Stylus單獨運行，在Tailwind之前。這意味著您不能將 Tailwind 的?theme()?函數(shù)的輸出輸入到 Sass 顏色函數(shù)中，例如，因為 ?theme()? 函數(shù)在您的 Sass 被編譯成 CSS 并輸入 PostCSS 之前不會被實際評估。

不行，Sass先被處理

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

為了獲得最有凝聚力的開發(fā)體驗，建議您專門使用 ?PostCSS ?。

除此之外，每個預(yù)處理器在與 Tailwind 一起使用時，都有自己的一兩個怪癖，下面用變通方法概述一下。

Sass

當(dāng)使用Sass的 Tailwind 時，使用 ?!important? 與 ?@apply? 需要您使用插值來正確編譯。

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

使用插值作為解決方法

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

Less

當(dāng)使用 Tailwind 和 Less 一起使用時，您不能嵌套 Tailwind 的 ?@screen? 指令。

無法工作，Less 無法檢查到這是一個媒體查詢

.card {
  @apply rounded-none;

  @screen sm {
    @apply rounded-lg;
  }
}

取而代之的是，使用常規(guī)的媒體查詢和 theme() 函數(shù)來引用您的屏幕尺寸，或者干脆不要嵌套您的@screen指令。

使用常規(guī)的媒體查詢和 theme()

.card {
  @apply rounded-none;

  @media (min-width: theme('screens.sm')) {
    @apply rounded-lg;
  }
}

在頂層使用 @screen 指令

.card {
  @apply rounded-none;
}
@screen sm {
  .card {
    @apply rounded-lg;
  }
}

Stylus

當(dāng)使用 Tailwind 和 Stylus 時，您不能使用 Tailwind的 ?@apply? 功能，如果不把整個 CSS 規(guī)則包裹在 ?@css? 中，那么 Stylus 就會把它當(dāng)作字面 CSS。

無法工作，Stylus 與 @apply 沖突

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

使用 @css 來避免被 Stylus 處理

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

然而，這有一個重要的代價，那就是您不能在 ?@css? 塊中使用任何 Stylus 功能。

另一個選擇是使用 ?theme()? 函數(shù)代替 ?@apply?，并以長格式寫出實際的 CSS 屬性。

使用 theme() 代替 @apply

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

除此之外，Stylus 不支持嵌套 ?@screen? 指令（就像 Less 一樣）。

無法工作，Stylus 檢查不出這是一個媒體查詢

.card {
  border-radius: 0;

  @screen sm {
    border-radius: theme('borderRadius.lg');
  }
}

取而代之的是，使用常規(guī)的媒體查詢和 ?theme()? 函數(shù)來引用您的屏幕尺寸，或者干脆不要嵌套您的 ?@screen? 指令。

使用常規(guī)的媒體查詢和 theme()

.card {
  border-radius: 0;

  @media (min-width: theme('screens.sm')) {
    border-radius: theme('borderRadius.lg');
  }
}

在頂層使用 @screen 指令

.card {
  border-radius: 0;
}
@screen sm {
  .card {
    border-radius: theme('borderRadius.lg');
  }
}