可行但需严格配置PostCSS：必须安装postcss和autoprefixer，根目录要有postcss.config.js（或.cjs），内容为{plugins: {tailwindcss: {}, autoprefixer: {}}；运行npx tailwindcss init -p生成两文件；tailwind.config.js中content字段须正确列出源文件路径；入口CSS中必须按顺序写@tailwind base、components、utilities三行指令。
直接在 Vite 项目里装 Tailwind CSS 是可行的，但跳过官方推荐的 postcss 和 autoprefixer 配置会大概率导致样式不生效或构建失败。
确认项目已初始化并使用 PostCSS
Tailwind 依赖 PostCSS 插件机制工作，Vite 默认启用 PostCSS，但必须确保项目根目录存在 postcss.config.js 或 postcss.config.cjs（ESM 项目推荐后者），且内容包含 tailwindcss 和 autoprefixer：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
如果没这个文件，npm install -D tailwindcss postcss autoprefixer 后运行 npx tailwindcss init -p 自动生成——别跳过 -p 参数，否则不会创建 postcss.config.js。
配置 tailwind.config.js 的关键项
生成的默认配置需要手动修改两处，否则开发时样式无法按需生成：
立即学习“前端免费学习笔记（深入）”；
-
content字段必须显式列出所有可能含 Tailwind 类名的文件路径，例如：content: ["./index.html", "./src/**/*.{vue,ts,jsx,tsx}"] -
mode: "jit"已是 V3+ 默认行为，不用写；但若你删了content或路径写错（比如漏掉.tsx后缀），热更新时类名会“消失” - 不要提前在
theme.extend里加大量自定义颜色——这会让构建变慢，优先用@layer utilities或直接写class
在入口 CSS 中正确引入 Tailwind 指令
不能只靠 @import "tailwindcss/base"，必须用三段标准指令，且顺序不能错：
@tailwind base; @tailwind components; @tailwind utilities;
常见错误包括：
- 把这三行写在
node_modules里的 CSS 文件中（无效） - 写在 SCSS/Sass 的
@import前面（会被忽略） - 在
main.ts里用import './styles/tailwind.css'，但该 CSS 文件里没放上面三行（白引）
开发时类名不生效？先检查这几个点
最常卡住的地方不是安装步骤，而是路径和加载时机：
- 检查浏览器控制台是否有
Failed to load resource报tailwind.css404 —— 说明 CSS 文件没被 Vite 正确解析 - 运行
vite build后检查dist/assets/*.css是否包含大量压缩后的 utility 类 —— 如果只有 base 规则，content路径八成错了 - Vite HMR 下新增类名有时延迟 1–2 秒才生效，不是 bug，是 JIT 扫描机制；但超过 5 秒没反应，就该看
postcss.config.js是否被识别（可临时加个console.log('postcss loaded')测试）
路径拼写、文件后缀、PostCSS 配置文件存在性，这三个点错一个，Tailwind 就只是个摆设。
