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 [email protected] [email protected] [email protected]
由于 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 [email protected] 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 [email protected] build ./src/tailwind.css -o ./dist/tailwind.css
閱讀有關添加基本樣式，提取元件以及添加新的功能類的文檔，以了解有關在 Tailwind 基礎上添加自定義 CSS 的更多資訊。
自定義您的配置
如果您想自定義 Tailwind 生成的内容，請使用 Tailwind CLI 工具建立一個
tailwind.config.js
檔案：
npx [email protected] 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 [email protected] build ./src/tailwind.css -o ./dist/tailwind.css
如果您想将配置檔案儲存在其他位置或使用其他名稱，請在建構 CSS 時使用
-c
選項傳遞配置檔案路徑：
npx [email protected] build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css
了解更多配置 Tailwind 文檔。
為生産而建構
為生産而建構時，在生成 CSS 時在指令行上設定
NODE_ENV = production
：
NODE_ENV=production npx [email protected] 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 擷取最新的預設配置：
請注意因為 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 [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9
相容性版本在任何方面都與主版本相同，是以您不會錯過任何功能或類似功能。
一旦您的其餘工具添加了對 PostCSS 8 的支援，就可以通過使用
latest
标簽重新安裝 Tailwind 及其相關依賴項來取代相容性建構：
npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install [email protected] [email protected] [email protected]
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()
關于可用的 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');
}
}
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)