# 官网
# 1. 安装
通过 npm 安装 tailwindcss，并创建您的 tailwind.config.js 文件。
npm install -D tailwindcss
npx tailwindcss init
1
2
3
4
2
3
4
# 2. 配置模板路径
将路径添加到 tailwind.config.js 文件中的所有模板文件。
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: []
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3. 开始 Tailwind 命令构建
运行 CLI 工具扫描您的模板文件以查找类并构建 CSS。
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
1
2
3
2
3
# 4. 开始在 HTML 中使用 Tailwind
将编译的 CSS 文件添加到 head，并开始使用 Tailwind 的实用程序类来设置您的内容样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
← 配置文件