Tailwind v3 安装与编译
Tailwind v3 提供了多种方式在项目中引入该 UI 框架：
Tip
由于 Tailwind v3 有一些不兼容的更新，如果需要从 Tailwind v2 升级到 v3 可以参考官方文档。
CDN
最简单的方式是使用 CDN 引入 Tailwind，该方式不需要在项目中安装依赖包，也不需要进行编译（以生成样式表）。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用 CDN 引入 Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
而且在 v3 版本中，使用 CDN 引入 Tailwind 的同时也支持对其定制，使用 CDN 所引入的模块暴露了一个对象 tailwind，通过它的属性 tailwind.config 可以设置 Tailwind 的一些参数属性
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<!-- ... -->
</body>
</html>
也支持添加自定义的样式（同样可以指定插入到哪一个 bucket 容器中）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>/* ... */</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>
Warning
CDN 引入仅应该用于开发环境，而不应该用于生成环境，使用其他方法引入 Tailwind 并编译出（静态）样式表会更安全。
Tailwind CLI
另一种方法是使用 Tailwind 官方提供了一个命令行 CLI 工具（一个编译器）。它会对项目的指定文件进行扫描，分析出使用了哪些基础类，然后编译出相应的样式文件。
- 首先需要在终端输入以下命令，以在项目中添加 Tailwind 的配置文件
tailwind.config.js
npx tailwindcss init
然后在配置文件 📄 tailwind.config.js 声明需要扫描/监听的文件
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 然后将 Tailwind 提供的三个模块导入项目的主样式表中
@tailwind base;
@tailwind components;
@tailwind utilities;
- 最后在终端执行编译命令，然后 Tailwind CLI 工具就会扫描
tailwind.config.js配置文件content属性中所声明的文件，查看使用了哪些基础类，并基于命令-i所提供的源样式表，提取合并项目里使用的样式，最后输出到命令-o所指定的样式表中
# 其中 -i 命令指定了输入的源样式表（i stand for input）
# 而 -o 命令指定了编译后输出的样式表位置（o stand for output）
npx tailwindcss -i ./src/input.css -o ./dist/output.css
Tip
如果希望一直监听项目的文件（tailwind.config.js 配置文件 content 属性中所声明的文件），可以在命令中添加 --watch 或 -w 指令
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Tip
在生产环境中可以进一步优化，使用指令 --minify 对编译生成的样式表进行压缩
npx tailwindcss -o build.css --minify
Tip
也可以先在项目（在终端输入命令 npm install -D tailwindcss）安装 Tailwind 依赖包，以调用本地的 Tailwind CLI 来执行编译操作。可以在 package.json 设置相应的 script 命令脚本，方便调用
{
/* ... */
"scripts": {
"build": "tailwindcss -i ./src/style.css -o ./dist/output.css",
"watch": "tailwindcss -i ./src/style.css -o ./dist/output.css --watch",
},
/* ... */
}
Tip
如果希望在生产环境中进一步优化，可以在 PostCSS 配置文件的最后使用 cssnano 插件对样式表进一步压缩
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}
Warning
记得项目的 HTML 文件需要引入的样式表应该是编译生成的文件，对于以上示例应该是 /dist/output.css 文件
作为 PostCSS 插件
如果项目使用了打包构建工具，例如 webpack、vite 等，可以将 Tailwind 作为它们的 PostCSS 插进引入到项目中。
以下假设项目使用 vite 打包工具（可以参考官方文档，以了解使用 vite 搭建项目的步骤），为项目添加 Tailwind 和 PostCSS 以及 autoprefixer 的步骤：
- 在终端输入以下命令安装依赖包
npm install -D tailwindcss postcss autoprefixer
- 创建 Tailwind 和 PostCSS 配置文件
# p stand for postcss
# 也可以用 npx tailwindcss init --postcss
npx tailwindcss init -p
然后就可以得到配置好的 PostCSS 配置文件 postcss.config.js 一般不需要对其进行修改
// postcss 依次使用 tailwindcss 插件进行编译
// 再使用 autoprefixer 插件为特定的样式添加前缀（以使样式表适用于更多的浏览器）
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
以及一个「空」的 Tailwind 配置文件 tailwind.config.js（只有一些必要的属性）
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
对 Tailwind 编译器的定制操作都在该文件里进行，首先需要设置的属性content 它指定了需要编译器扫描/监听的文件，根据所需设置监听文件的路径（一般监听项目的 src 文件夹里的文件，支持使用正则表达式匹配多个文件）
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 将 Tailwind 提供的三个模块添加到项目的主样式表中
@tailwind base;
@tailwind components;
@tailwind utilities;
Tip
记得将编译后的样式表引入到项目的入口文件中（如果项目使用打包工具构建的，该步骤一般都已经自动配置好了）
- 根据
package.json里的script脚本命令，在终端输入相应的命令，让打包工具对项目进行构建
# 对于以 vite 作为打包工具的项目，可以使用以下命令
npm run dev