Tailwind CSS 安裝

2022-07-23 11:49 更新

集成指南

根據(jù)您使用的其他框架/工具，安裝 Tailwind CSS 的過(guò)程可能會(huì)略有不同，因此我們整理了一系列涵蓋流行設(shè)置的指南。

 Next.js  Vue 3（Vite）  Laravel
 Nuxt.js  Create React App  Gatsby

沒(méi)有在列表中看到您的工具？我們一直在擴(kuò)充新的指南，同時(shí)您也可以以 PostCSS 插件的形式安裝 Tailwind CSS。

將 Tailwind CSS 安裝為 PostCSS 插件

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

對(duì)于大多數(shù)實(shí)際項(xiàng)目，我們建議將 Tailwind 作為 PostCSS 插件安裝。大多數(shù)現(xiàn)代框架已經(jīng)在底層使用 PostCSS，你很有可能已經(jīng)使用過(guò)或正在使用其他 PostCSS 插件，例如 ?autoprefixer?。

如果您從沒(méi)有聽(tīng)說(shuō)過(guò) PostCSS，或者很想知道它與其它工具，如 Sass 的區(qū)別，請(qǐng)閱讀我們的指南：將 PostCSS 用作預(yù)處理器。

通過(guò) npm 安裝 Tailwind

對(duì)于大多數(shù)項(xiàng)目（并利用 Tailwind 的自定義功能），您需要通過(guò) npm 安裝 Tailwind 及其依賴項(xiàng)。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 不會(huì)自動(dòng)添加瀏覽器引擎前綴到生成的 CSS 中，我們建議您安裝 ?autoprefixer ?去處理這個(gè)問(wèn)題，就像上面的代碼片段所展示的那樣。

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

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在這種情況下，您應(yīng)該安裝下文中的 PostCSS 7 兼容性版本。

作為 PostCSS 插件來(lái)添加 Tailwind

將 ?tailwindcss ?和 ?autoprefixer ?添加到您的 PostCSS 配置中。 多數(shù)情況下，這是項(xiàng)目根目錄下的 ?postcss.config.js? 文件，但也可能是 ?.postcssrc? 文件或是由 package.json 文件中的 ?postcss ?鍵所指定。

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

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

創(chuàng)建您的配置文件

如果您想要自定義您的 Tailwind 安裝，可以使用 Tailwind CLI 工具生成一份配置文件，這個(gè)命令行工具已包含在了 ?tailwindcss ?這個(gè) npm 包里了。

npx tailwindcss init

這將會(huì)在您的工程根目錄創(chuàng)建一個(gè)最小的 ?tailwind.config.js? 文件。

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

包含 Tailwind 到您的 CSS 中

如果您尚未創(chuàng)建一個(gè) CSS 文件，請(qǐng)使用 @tailwind 指令注入 Tailwind 的基礎(chǔ) (base)，組件 (components) 和功能 (utilities) 樣式：

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

Tailwind 將在構(gòu)建時(shí)將這些指令替換為基于您配置的設(shè)計(jì)系統(tǒng)生成的所有樣式。

如果您使用的是 ?postcss-import?（或背后使用它的工具，例如 Webpacker for Rails），請(qǐng)使用我們的導(dǎo)入而不是 ?@tailwind? 指令來(lái)避免在導(dǎo)入任何其他文件時(shí)出現(xiàn)問(wèn)題：

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

如果您使用的是像 React 或 Vue 這樣的 JavaScript 框架，支持直接將 CSS 文件導(dǎo)入到 JS 中，那么您也可以完全跳過(guò)創(chuàng)建 CSS 文件，而直接導(dǎo)入 tailwindcss / tailwind.css，而后者已經(jīng)安裝了所有這些指令：

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

生成您的 CSS

實(shí)際構(gòu)建項(xiàng)目的方式將取決于您使用的工具。 您的框架可能包含諸如 ?npm run dev? 之類(lèi)的命令，以啟動(dòng)在后臺(tái)編譯 CSS 的開(kāi)發(fā)服務(wù)器，您可能自己在運(yùn)行 ?webpack?，或者您正在使用 ?postcss-cli? 并運(yùn)行諸如 ?postcss styles.css -o compiled.css? 之類(lèi)的命令。

如果您已經(jīng)熟悉 PostCSS，則可能知道您需要做什么，如果不熟悉，請(qǐng)參考所用工具的文檔。

為生產(chǎn)而構(gòu)建時(shí)，請(qǐng)確保配置清除 (purge) 選項(xiàng)以刪除任何未使用類(lèi)，這樣生成的文件尺寸最小：

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

如果您將 Tailwind 與依賴于較舊版本 PostCSS 的工具集成在一起，則在嘗試構(gòu)建 CSS 時(shí)可能會(huì)看到如下錯(cuò)誤：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在這種情況下，您應(yīng)該切換到下文中的 PostCSS 7 兼容性版本。

使用 Tailwind CLI

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

如果您想使用 Tailwind 編譯 CSS 而不將其直接集成到任何類(lèi)型的構(gòu)建工具中，您可以使用 Tailwind CLI 工具來(lái)生成您的 CSS，而無(wú)需配置 PostCSS，甚至如果您不想安裝 Tailwind 作為依賴項(xiàng).

使用 ?npx ?這個(gè)工具，它會(huì)與 ?npm ?一起自動(dòng)安裝，以生成完全編譯的 Tailwind CSS 文件：

npx tailwindcss -o tailwind.css

這將創(chuàng)建一個(gè)基于 Tailwind 的默認(rèn)配置生成的名為 ?tailwind.css? 的文件，并使用 autoprefixer 自動(dòng)添加任何必需的瀏覽器前綴。

現(xiàn)在，您可以像其他樣式表一樣將此文件引入到 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>

關(guān)注變化

您可以使用 ?--watch? 或 ?-w? 標(biāo)志來(lái)啟動(dòng)監(jiān)視進(jìn)程并在您進(jìn)行任何更改時(shí)自動(dòng)重建您的 CSS：

npx tailwindcss -o tailwind.css --watch

使用自定義 CSS 文件

如果您想基于 Tailwind 生成的默認(rèn)樣式自定義任何 CSS ，通常情況下只需創(chuàng)建一個(gè) CSS 文件，并使用 ?@tailwind? 指令包含 Tailwind 的 ?base?，?components ?和 ?utilities ?樣式：

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

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

然后在構(gòu)建 CSS 時(shí)包含該文件的路徑：

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

自定義您的配置

如果您想自定義 Tailwind 生成的內(nèi)容，請(qǐng)使用 Tailwind CLI 工具創(chuàng)建一個(gè) ?tailwind.config.js? 文件：

npx tailwindcss init

這將會(huì)在您工程的根目錄生成一個(gè)最小版本的 ?tailwind.config.js? 文件。

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

使用 Tailwind CLI 構(gòu)建 CSS 時(shí)，將自動(dòng)讀取此文件：

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

如果您想將配置文件保存在其他位置或使用其他名稱，請(qǐng)?jiān)跇?gòu)建 CSS 時(shí)使用 ?-c? 選項(xiàng)傳遞配置文件路徑：

npx tailwindcss -i ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

禁用自動(dòng)前綴

默認(rèn)情況下，Tailwind CLI 工具將通過(guò) Autoprefixer 運(yùn)行您的 CSS 以添加任何必要的供應(yīng)商前綴。如果您已經(jīng)在構(gòu)建管道中設(shè)置了 Autoprefixer，則可以在 Tailwind CLI 工具中使用 ?--no-autoprefixer? 標(biāo)志禁用它，以避免運(yùn)行兩次：

npx tailwindcss --no-autoprefixer -o tailwind.css

使用自定義 PostCSS 配置

如果您想在 Tailwind 旁邊使用其他 PostCSS 插件，您可以在項(xiàng)目根目錄中創(chuàng)建一個(gè) ?postcss.config.js? 文件來(lái)添加額外的插件，如果您在構(gòu)建 CSS 時(shí)使用 ?--postcss? 標(biāo)志，Tailwind 將包含它們：

npx tailwindcss --postcss -o tailwind.css

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-100vh-fix'),
  ]
}

默認(rèn)情況下，插件會(huì)在 Tailwind 生成 CSS 之后應(yīng)用。如果您有需要在 Tailwind 之前運(yùn)行的插件，只需將 tailwindcss 包含在您的插件列表中，Tailwind CLI 就會(huì)檢測(cè)到它并尊重您的自定義插件順序：

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

如果您想在創(chuàng)建 ?tailwind.config.js? 文件時(shí)自動(dòng)生成基本的 ?postcss.config.js? 文件，請(qǐng)?jiān)诔跏蓟渲梦募r(shí)使用 ?--postcss? 或 ?-p? 標(biāo)志：

npx tailwindcss init --postcss

為生產(chǎn)而構(gòu)建

為生產(chǎn)而構(gòu)建時(shí)，在生成 CSS 時(shí)在命令行上設(shè)置 ?NODE_ENV = production?： 

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

這將確保 Tailwind 刪除任何未使用的 CSS 以獲得最佳性能。

您還可以使用 ?--minify? 標(biāo)志使用 cssnano 壓縮 CSS：

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify

通過(guò) CDN 來(lái)使用 Tailwind

在使用 CDN 之前，請(qǐng)注意，如果沒(méi)有將 Tailwind 集成到您的構(gòu)建過(guò)程中，那么許多使 Tailwind CSS 強(qiáng)大的功能將不可用。

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

想要充分利用 Tailwind，您應(yīng)該作為 PostCSS 插件安裝 Tailwind。

想要使用 Tailwind 進(jìn)行快速演示，或者只是試一下框架，請(qǐng)通過(guò) CDN 獲取最新的默認(rèn)配置：

<link  rel="external nofollow" target="_blank"  rel="stylesheet">

請(qǐng)注意因?yàn)?nbsp;CDN 文件很大 (72.8kB compressed, 2936.0kB raw), 它并不代表您將 Tailwind 作為構(gòu)建過(guò)程的一部分時(shí)生成的文件尺寸也是這么大.

HTML 啟動(dòng)模板

為了使 Tailwind 的樣式能夠按預(yù)期工作，您將需要使用 HTML5 文檔類(lèi)型并包括響應(yīng)式視口元標(biāo)記以正確處理所有設(shè)備上的響應(yīng)式樣式。

<!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 等）會(huì)在后臺(tái)自動(dòng)為您完成所有這些操作，因此，根據(jù)您要構(gòu)建的內(nèi)容，可能不需要進(jìn)行設(shè)置。

PostCSS 7 兼容性版本

從 v2.0 版本開(kāi)始，Tailwind CSS 依賴于 PostCSS 8。由于 PostCSS 8 才使用了幾個(gè)月，因此生態(tài)系統(tǒng)中的許多其他工具尚未更新，這意味著在安裝 Tailwind，并嘗試編譯 CSS 時(shí)，您可能會(huì)在終端中看到這樣的錯(cuò)誤：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

為了幫助彌合差距，直到每個(gè)人都更新，我們還在 npm 上發(fā)布了一個(gè) PostCSS 7 兼容性構(gòu)??建作為 ?@tailwindcss/postcss7-compat?。

如果遇到上述錯(cuò)誤，請(qǐng)卸載 Tailwind 并使用兼容性版本重新安裝：

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

兼容性版本在任何方面都與主版本相同，因此您不會(huì)錯(cuò)過(guò)任何功能或類(lèi)似功能。

一旦您的其余工具添加了對(duì) PostCSS 8 的支持，就可以通過(guò)使用 ?latest ?標(biāo)簽重新安裝 Tailwind 及其相關(guān)依賴項(xiàng)來(lái)取代兼容性構(gòu)建：

npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest


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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)