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

2022-07-25 17:38 更新

使用預(yù)處理器

一個(gè)使用 Tailwind 與常見(jiàn)的 CSS 預(yù)處理器,如 Sass,Less 和 Stylus 的指南


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

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

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

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

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

這有幾個(gè)好處。

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

關(guān)于可用的 PostCSS 插件,請(qǐng)參見(jiàn) PostCSS GitHub repository,但這里有幾個(gè)重要的插件,我們?cè)谧约旱捻?xiàng)目中使用,并且可以推薦。

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

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

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

要使用它,請(qǐng)通過(guò) npm 安裝該插件:

npm install postcss-import

然后把它作為 PostCS 配置中的第一個(gè)插件:

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

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

無(wú)法工作,@import 語(yǔ)句必須放在第一位。

/* components.css */

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

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

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

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

/* 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? 聲明。

無(wú)法工作,@import 語(yǔ)句必須在前面。

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

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

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

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

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

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

您可以通過(guò)把您的 ?@tailwind? 聲明放在他們自己的文件中來(lái)解決這個(gè)問(wèn)題。為了方便,我們?yōu)槊總€(gè) ?@tailwind? 聲明提供了單獨(dú)的文件,您可以直接從 ?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";

嵌套

要添加對(duì)嵌套聲明的支持,我們推薦我們捆綁的 ?tailwindcss/nesting? 插件,這是一個(gè) PostCSS 插件,它包裝了 postcss-nested 或 postcss-nesting 并充當(dāng)兼容層,以確保您選擇的嵌套插件正確理解 Tailwind 的自定義語(yǔ)法,例如?@apply? 和 ?@screen?。

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

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

默認(rèn)情況下,它在后臺(tái)使用 postcss-nested 插件,該插件使用類似 Sass 的語(yǔ)法,并且是 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'),
  ]
}

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

請(qǐng)注意,如果您在項(xiàng)目中使用 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ù)處理器來(lái)使用變量。

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

/* ... */

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

我們?cè)?nbsp;Tailwind 本身中廣泛使用 CSS 變量,因此如果您可以使用 Tailwind,則可以使用原生 CSS 變量。

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

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

供應(yīng)商前綴

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

要使用它,請(qǐng)通過(guò) npm 安裝它:您可以使用 postcss-preset-env 插件為您的項(xiàng)目添加對(duì)即將到來(lái)的 CSS 特性的支持。

npm install autoprefixer

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

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

使用 Sass、Less 或 Stylus

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

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

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

不行,Sass先被處理

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

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

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

Sass

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

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

使用插值作為解決方法

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

Less

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

無(wú)法工作,Less 無(wú)法檢查到這是一個(gè)媒體查詢

.card {
  @apply rounded-none;

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

取而代之的是,使用常規(guī)的媒體查詢和 theme() 函數(shù)來(lái)引用您的屏幕尺寸,或者干脆不要嵌套您的@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 時(shí),您不能使用 Tailwind的 ?@apply? 功能,如果不把整個(gè) CSS 規(guī)則包裹在 ?@css? 中,那么 Stylus 就會(huì)把它當(dāng)作字面 CSS。

無(wú)法工作,Stylus 與 @apply 沖突

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

使用 @css 來(lái)避免被 Stylus 處理

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

然而,這有一個(gè)重要的代價(jià),那就是您不能在 ?@css? 塊中使用任何 Stylus 功能。

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

使用 theme() 代替 @apply

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

除此之外,Stylus 不支持嵌套 ?@screen? 指令(就像 Less 一樣)。

無(wú)法工作,Stylus 檢查不出這是一個(gè)媒體查詢

.card {
  border-radius: 0;

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

取而代之的是,使用常規(guī)的媒體查詢和 ?theme()? 函數(shù)來(lái)引用您的屏幕尺寸,或者干脆不要嵌套您的 ?@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');
  }
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)