Tailwind CSS - 與預處理器一起使用

預處理器是一種擴充套件 CSS 並編譯成常規 CSS 語法的指令碼語言，以便 Web 瀏覽器可以讀取。

由於 Tailwind 是 PostCSS 外掛，因此您可以使用 SASS、LESS 和 Stylus 等預處理器，但是使用它們有一些技巧。如果您已經瞭解這些預處理器的幾種語法，那麼它們可能無法像在常規 CSS 中那樣與 Tailwind 一起使用。有關指南，請閱讀本文。

為了獲得最佳的開發體驗，我們強烈建議您使用 PostCSS 外掛，並且不要使用 Sass 或 Less 預處理器。

使用 PostCSS 作為預處理器

如果您正在一個新專案上工作，並且不需要將其與任何現有的 Sass/Less/Stylus 樣式表整合，那麼PostCSS 是推薦與 Tailwind CSS 一起使用的預處理器，您應該認真考慮依賴其他 PostCSS 外掛來新增您使用的預處理器功能，而不是使用單獨的預處理器。

構建速度更快：由於您的 CSS 不必由多個工具進行解析和處理，因此僅使用 PostCSS 即可更快地編譯您的 CSS。
沒有怪癖或變通方法：因為 Tailwind 向 CSS 添加了一些新的非標準關鍵字（例如 @tailwind、@apply、theme() 等），所以您經常必須以煩人且不直觀的方式編寫 CSS，才能使預處理器獲得預期的輸出。專門使用 PostCSS 可以避免這種情況。

構建時匯入

預處理器提供的最有用功能之一是能夠將 CSS 組織成多個檔案，並透過預先處理 @import 語句而不是在瀏覽器中將其組合在構建時。要安裝 PostCSS，請執行以下命令。

npm install -D postcss-import

然後將其作為第一個外掛新增到您的 PostCSS 配置中

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

'postcss-import' 非常嚴格，不允許在檔案頂端以外的任何地方使用'@import' 語句。

不起作用，@import 語句必須放在最前面

/* components.css */

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

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

為匯入和實際 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');
  /* ... */
}

巢狀

我們建議使用我們捆綁的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外掛，該外掛為Tailwind CSS外掛API中的巢狀支援提供支援，並且語法類似於SASS。

如果您更願意使用postcss-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支援變數，因此根本不需要使用預處理器來使用變數。要了解更多關於CSS變數的資訊。

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

/* ... */

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

使用的變數可以用Tailwind的'theme()'函式替換。這使您可以直接在CSS中訪問來自tailwind.config.js檔案的全部設計令牌。

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

廠商字首

Autoprefixer將幫助您管理CSS中的廠商字首。

/* install it via npm */
npm install -D autoprefixer

/*  Add it to the very end of your plugin
    list in your PostCSS configuration */

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

安裝Tailwind作為PostCSS外掛

在安裝PostCSS外掛之前，您應該安裝Tailwind CSS。

先決條件

安裝Tailwind CSS

要安裝PostCSS，請按照以下步驟操作。

步驟1：將Tailwind新增到您的PostCSS配置中

/* postcss.config.js */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

步驟2：配置您的模板路徑

步驟3：將Tailwind指令新增到您的CSS中

/* tailwind.config.js */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

步驟4：啟動您的構建過程

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

步驟5：開始在您的HTML中使用Tailwind

npm run dev

列印頁面