使用 PostCSS 安装 Tailwind CSS
将 Tailwind CSS 作为 PostCSS 插件安装，是与 Next.js 和 Angular 等框架集成的最顺畅方式。
安装 Tailwind CSS
通过 npm 安装 tailwindcss、@tailwindcss/postcss 和 postcss。
Terminal
shellnpm install tailwindcss @tailwindcss/postcss postcss将 Tailwind 加入 PostCSS 配置
将 @tailwindcss/postcss 加入 postcss.config.mjs，或项目中配置 PostCSS 的位置。
postcss.config.mjs
jsexport default {
plugins: {
"@tailwindcss/postcss": {},
}
}导入 Tailwind CSS
在 CSS 文件中添加 @import 以导入 Tailwind CSS。
CSS
css@import "tailwindcss";启动构建
使用 npm run dev 或 package.json 中配置的命令运行构建流程。
Terminal
shellnpm run dev在 HTML 中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中 （你的框架可能已自动处理），然后使用 Tailwind 的工具类为内容添加样式。
HTML
html<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>