tailwindcss 官網（一）安裝、使用前處理器

文章目錄

tailwindcss 官網（一）安裝、使用前處理器
- 1. 安裝
- - 集成指南
  - 以 PostCSS 插件的形式安裝 Tailwind CSS
  - - 通過 npm 安裝 Tailwind
    - 作為 PostCSS 插件來添加 Tailwind
    - 創建您的組態檔
    - 包含 Tailwind 到您的 CSS 中
    - 生成您的 CSS
  - 不依賴 PostCSS 使用 Tailwind
  - - 使用自定義 CSS 檔案
    - 自定義您的配置
    - 為生產而構建
  - 通過 CDN 來使用 Tailwind
  - HTML 啟動模板
  - PostCSS 7 兼容性版本
- 2. 使用前處理器
- - 使用PostCSS作為您的前處理器
  - - 構建時匯入
    - 嵌套
    - 變數
    - 未來的 CSS 功能
  - 使用 Sass、Less 或 Stylus
  - - Sass
    - Less
    - Stylus

官網：安裝 - Tailwind CSS 中文檔案

1. 安裝

學習如何在您的工程中使用 Tailwind CSS

集成指南

對于不同的框架/工具，安裝 Tailwind CSS 是完全不同的程序，所以我們整理了一份常見安裝的指南集合，

Next.js

Vue 3 (Vite)

Laravel

Nuxt.js

Create React App

Gatsby

沒有在串列中看到您的工具？我們一直在擴充新的指南，同時您也可以按照以 PostCSS 插件的形式安裝 Tailwind CSS 的檔案來安裝，

以 PostCSS 插件的形式安裝 Tailwind CSS

對于大多數現實中的工程，我們建議作為一個 PostCSS 插件來安裝 Tailwind，大多數的現代框架基本都默認使用了 PostCSS，您很可能已經使用或當前正在使用其它 PostCSS 插件，例如 autoprefixer.

如果您從沒有聽說過 PostCSS，或者很想知道它與其它工具，如 Sass 的區別，請閱讀我們的指南：將 PostCSS 用作前處理器，

如果您覺得這有些麻煩，并且想在不配置 PostCSS 的情況下嘗試使用 Tailwind，請閱讀有關在不依賴 PostCSS 使用 Tailwind 的說明，

通過 npm 安裝 Tailwind

對于大多數專案（并利用 Tailwind 的自定義功能），您需要通過 npm 安裝 Tailwind 及其依賴項，

npm install tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 不會自動添加瀏覽器引擎前綴到生成的 CSS 中，我們建議您安裝 autoprefixer 去處理這個問題，就像上面的代碼片段所展示的那樣，

如果您將 Tailwind 與依賴于舊版本 PostCSS 的工具集成在一起，則可能會看到如下錯誤：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在這種情況下，您應該安裝 PostCSS 7 兼容性版本，

作為 PostCSS 插件來添加 Tailwind

將 tailwindcss 和 autoprefixer 添加到您的 PostCSS 配置中，多數情況下，這是專案根目錄下的 postcss.config.js 檔案，但也可能是 .postcssrc 檔案或是由 package.json 檔案中的 postcss 鍵所指定，

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

如果您不太清楚如何在您正在使用的工具如何配置 PostCSS，則需要參考一下這些工具的檔案，搜索 ”configure postcss {我的工具名字}” 也將很快為您提供答案，

如果您使用的是其他 PostCSS 插件，則應閱讀有關將 PostCSS 用作前處理器的檔案，以獲取有關與 Tailwind 集成在一起的最佳實踐的詳細資訊，

創建您的組態檔

如果您想要自定義您的 Tailwind 安裝，可以使用 Tailwind CLI 工具生成一份組態檔，這個命令列工具已包含在了 tailwindcss 這個 npm 包里了，

npx tailwindcss init

這將會在您的工程根目錄創建一個最小的 tailwind.config.js 檔案，

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

在配置檔案中了解有關配置 Tailwind 的更多資訊，

包含 Tailwind 到您的 CSS 中

如果您尚未創建一個 CSS 檔案，請使用 @tailwind 指令注入 Tailwind 的基礎 (base)，組件 (components) 和功能 (utilities) 樣式：

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 將在構建時將這些指令替換為基于您配置的設計系統生成的所有樣式，

如果您使用的是 postcss-import（或背后使用它的工具，例如 Webpacker for Rails），請使用我們的匯入而不是 @tailwind 指令來避免在匯入任何其他檔案時出現問題：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

如果您使用的是像 React 或 Vue 這樣的 JavaScript 框架，支持直接將 CSS 檔案匯入到 JS 中，那么您也可以完全跳過創建 CSS 檔案，而直接匯入 tailwindcss / tailwind.css，而后者已經安裝了所有這些指令：

// app.js
import "tailwindcss/tailwind.css"

生成您的 CSS

實際構建專案的方式將取決于您使用的工具，您的框架可能包含諸如 npm run dev 之類的命令，以啟動在后臺編譯 CSS 的開發服務器，您可能自己在運行 webpack，或者您正在使用 postcss-cli 并運行諸如 postcss styles.css -o compiled.css 之類的命令，

如果您已經熟悉 PostCSS，則可能知道您需要做什么，如果不熟悉，請參考所用工具的檔案，

為生產而構建時，請確保配置清除 (purge) 選項以洗掉任何未使用類，這樣生成的檔案尺寸最小：

  // tailwind.config.js
  module.exports = {
+   purge: [
+     './src/**/*.html',
+     './src/**/*.js',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

閱讀我們有關優化生產的單獨指南，以了解有關 tree-shaking 優化未使用樣式以獲得最佳性能的更多資訊，

如果您將 Tailwind 與依賴于較舊版本 PostCSS 的工具集成在一起，則在嘗試構建 CSS 時可能會看到如下錯誤：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在這種情況下，您應該切換到我們的 PostCSS 7 兼容性版本，

不依賴 PostCSS 使用 Tailwind

對于簡單的專案或只是體驗一下 Tailwind，您可以使用 Tailwind CLI 工具生成 CSS，而無需配置 PostCSS 或甚至不需要安裝 Tailwind 作為依賴項，

使用 npx 這個工具，它會與 npm 一起自動安裝，以生成完全編譯的 Tailwind CSS 檔案：

npx tailwindcss-cli@latest build -o tailwind.css

這將創建一個基于 Tailwind 的默認配置生成的名為 tailwind.css 的檔案，并使用 autoprefixer 自動添加任何必需的瀏覽器前綴，

現在，您可以像其他樣式表一樣將此檔案引入到 HTML 中：

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

使用自定義 CSS 檔案

如果您想基于 Tailwind 生成的默認樣式自定義任何 CSS ，通常情況下只需創建一個 CSS 檔案，并使用 @tailwind 指令包含 Tailwind 的 base，components 和 utilities 樣式：

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

然后使用 npx tailwindcss build 構建 CSS 時，指定該檔案的路徑：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

閱讀有關添加基本樣式，提取組件以及添加新的功能類的檔案，以了解有關在 Tailwind 基礎上添加自定義 CSS 的更多資訊，

自定義您的配置

如果您想自定義 Tailwind 生成的內容，請使用 Tailwind CLI 工具創建一個 tailwind.config.js 檔案：

npx tailwindcss-cli@latest init

這將會在您工程的根目錄生成一個最小版本的 tailwind.config.js 檔案，

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

這個檔案會在使用 npx tailwindcss build 命令生成您的 CSS 檔案時被自動讀取：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

如果您想將組態檔保存在其他位置或使用其他名稱，請在構建 CSS 時使用 -c 選項傳遞組態檔路徑：

npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

了解更多配置 Tailwind 檔案，

為生產而構建

為生產而構建時，在生成 CSS 時在命令列上設定 NODE_ENV = production：

NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

這將確保 Tailwind 洗掉所有未使用的 CSS 并最小化 CSS 檔案以獲得最佳性能，閱讀我們有關優化生產的單獨指南，以了解更多資訊，

通過 CDN 來使用 Tailwind

在使用 CDN 之前，請注意，如果沒有將 Tailwind 集成到您的構建程序中，那么許多使 Tailwind CSS 強大的功能將不可用，

您無法自定義 Tailwind 默認主題
您不能使用任何指令，如： @apply， @variants 等等
您無法啟用更多的變體，如： group-focus
您無法下載第三方的插件
您無法 tree-shake 未使用到的 Styles

想要充分利用 Tailwind，您應該作為 PostCSS 插件安裝 Tailwind，

想要使用 Tailwind 進行快速演示，或者只是試一下框架，請通過 CDN 獲取最新的默認配置：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

請注意因為 CDN 檔案很大 (73.2kB compressed, 3020.7kB raw), 它并不代表您將 Tailwind 作為構建程序的一部分時生成的檔案尺寸也是這么大.

遵循我們最佳實踐的網站幾乎總是壓縮在10kb以下，

HTML 啟動模板

為了使 Tailwind 的樣式能夠按預期作業，您將需要使用 HTML5 檔案型別并包括回應式視口元標記以正確處理所有設備上的回應式樣式，

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/path/to/tailwind.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

許多前端框架（如 Next.js，vue-cli 等）會在后臺自動為您完成所有這些操作，因此，根據您要構建的內容，可能不需要進行設定，

PostCSS 7 兼容性版本

從 v2.0 版本開始，Tailwind CSS 依賴于 PostCSS 8，由于 PostCSS 8 才使用了幾個月，因此生態系統中的許多其他工具尚未更新，這意味著在安裝 Tailwind，并嘗試編譯 CSS 時，您可能會在終端中看到這樣的錯誤：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

為了彌合這個問題，直到每個人都進行了更新，我們還在 npm 的 compat 頻道下發布了 PostCSS 7 兼容性版本，

如果遇到上述錯誤，請卸載 Tailwind 并使用兼容性版本重新安裝：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

兼容性版本在任何方面都與主版本相同，因此您不會錯過任何功能或類似功能，

一旦您的其余工具添加了對 PostCSS 8 的支持，就可以通過使用 latest 標簽重新安裝 Tailwind 及其相關依賴項來取代兼容性構建：

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

2. 使用前處理器

一個使用 Tailwind 與常見的 CSS 前處理器，如 Sass，Less 和 Stylus 的指南

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

重要的是要注意，您不需要在Tailwind中使用前處理器–您通常在 Tailwind 專案中寫很少的 CSS，所以使用前處理器并不像在一個您寫了很多自定義 CSS 的專案中那樣有利，

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

使用PostCSS作為您的前處理器

如果您在一個全新的專案中使用 Tailwind，并且不需要將它與任何現有的 Sass/Less/Stylus 樣式表集成，您應該高度考慮依靠其他 PostCSS 插件來添加您所使用的前處理器功能，而不是使用一個單獨的前處理器，

這有幾個好處，

您的構建速度會更快，因為您的 CSS 不需要被多個工具決議和處理，所以只使用 PostCSS，您的 CSS 會編譯得更快，
因為 Tailwind 添加了一些新的非標準關鍵字到 CSS 中（如@tailwind, @apply, theme()等），您經常不得不用煩人的，不直觀的方式來寫您的 CSS，以得到一個前處理器給您預期的輸出，而使用 PostCSS 則可以避免這種情況，

關于可用的 PostCSS 插件，請參見PostCSS GitHub repository，但這里有幾個重要的插件，我們在自己的專案中使用，并且可以推薦，

構建時匯入

前處理器提供的最有用的功能之一是能夠將您的 CSS 組織成多個檔案，并在構建時通過提前處理 @import 陳述句而不是在瀏覽器中結合它們，

用于處理 PostCSS 的規范插件是 postcss-import，

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

# npm
npm install postcss-import

# yarn
yarn add postcss-import

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

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

關于 postcss-import，需要注意的一個重要問題是，它嚴格遵守 CSS 規范，不允許在任何地方使用 @import 陳述句，除非在檔案的頂部，

無法作業，@import 陳述句必須放在第一位，

/* components.css */

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

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

解決這個問題最簡單的方法就是永遠不要在同一個檔案中混合常規 CSS 和匯入，取而代之的是，為您的匯入檔案創建一個主入口檔案，并將所有實際的 CSS 保存在單獨的檔案中，

為匯入和實際的 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 宣告放在他們自己的檔案中來解決這個問題，為了方便，我們為每個 @tailwind 宣告提供了單獨的檔案，您可以直接從 node_modules 匯入，

匯入我們提供的 CSS 檔案，

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

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

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

postcss-import 是足夠聰明的，它會自動尋找 node_modules 檔案夾中的檔案，所以您不需要提供整個路徑–比如 "tailwindcss/base" 就足夠了，

嵌套

要添加對嵌套宣告的支持，您有兩個選項：

postcss-nested，它使用的語法很像Sass，
postcss-nesting，它遵循 CSS Nesting 規范，希望將來能在瀏覽器中直接使用，

要使用這些插件，請通過 npm 安裝它們：

# npm
npm install postcss-nested  # or postcss-nesting

# yarn
yarn add postcss-nested  # or postcss-nesting

然后將它們添加到您的 PostCSS 配置中，在 Tailwind 本身之后，但在 Autoprefixer 之前：

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

變數

如今 CSS 變數（官方稱為自定義屬性）有非常好的[瀏覽器支持](https://caniuse.com/#search=css custom properties)，所以實際上您可能根本不需要變數的插件，

但是如果您需要支持 IE11，您可以使用postcss-custom-properties插件來自動為您的變數創建回退，

要使用它，請通過 npm 安裝它，

# npm
npm install postcss-custom-properties

# yarn
yarn add postcss-custom-properties

然后把它添加到您的 PostCSS 配置中，在 Tailwind 本身之后，但在 Autoprefixer 之前：

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

未來的 CSS 功能

您可以使用 postcss-preset-env 插件為您的專案添加對即將到來的 CSS 特性的支持，

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

# npm
npm install postcss-preset-env

# yarn
yarn add postcss-preset-env

然后把它添加到您的 PostCSS 配置中，在 Tailwind 本身之后的某個地方，

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

需要注意的是，CSS 變數、嵌套和自動前綴都是開箱即用的，所以如果您使用 postcss-reset-env，您不需要為這些功能添加單獨的插件，

使用 Sass、Less 或 Stylus

要使用 Tailwind 的預處理工具，如 Sass，Less，或 Stylus，您需要添加一個額外的構建步驟到您的專案中，讓您通過 PostCSS 運行您的預處理 CSS，如果您在專案中使用 Autoprefixer，您已經有了類似這樣的設定，

確切的說明將取決于您使用的構建工具，所以請參閱我們的安裝檔案來了解更多關于將 Tailwind 整合到您現有的構建程序中，

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

不行，Sass先被處理

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

為了獲得最有凝聚力的開發體驗，建議您專門使用 PostCSS ，

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

Sass

當使用Sass的 Tailwind 時，使用！重要與@apply需要您使用插值來正確編譯，

無法作業，Sass 與 !important 沖突

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

Use interpolation as a workaround

使用插值作為變通

：

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

Less

當使用 Tailwind 和 Less 一起使用時，您不能嵌套 Tailwind 的 @screen 指令，

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

.card {
  @apply rounded-none;

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

取而代之的是，使用常規的媒體查詢和 theme() 函式來參考您的螢屏尺寸，或者干脆不要嵌套您的@screen指令，

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

.card {
  @apply rounded-none;

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

Use the @screen directive at the top-level

在頂層使用 @screen 指令

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

Stylus

當使用 Tailwind 和 Stylus 時，您不能使用 Tailwind的 @apply 功能，如果不把整個 CSS 規則包裹在 @css 中，那么 Stylus 就會把它當作字面 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() 函式代替 @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');
  }
}

取而代之的是，使用常規的媒體查詢和 theme() 函式來參考您的螢屏尺寸，或者干脆不要嵌套您的 @screen 指令，

使用常規的媒體查詢和 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');
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299696.html

標籤：其他

上一篇：node中http模塊的使用

下一篇：一篇文章帶你看懂js函式指標this