vue3 + vite 项目应使用 @tailwindcss/vite 插件，它轻量可靠、支持 hmr、避免样式丢失；cli 方式无法识别 sfc 中的 class，且不触发重编译；content 必须包含 .vue 路径，样式入口需用 @tailwind 指令而非直接 import。
直接上结论：Vue3 + Vite 项目里用 @tailwindcss/vite 插件是最轻量、最可靠的方式，比手动配置 PostCSS 或靠 tailwindcss CLI 构建更贴合开发流——热更新准、无样式丢失、不污染全局 CSS。
为什么不用 npx tailwindcss -i ./src/input.css -o ./dist/output.css？
这种 CLI 方式在 Vue 单文件组件（SFC）中会失效：它无法识别 <template></template> 和 <script setup></script> 里的 class 字符串，导致你写了 text-blue-500 却没样式。Tailwind 必须扫描源码中的类名来生成对应 CSS，而 CLI 模式只处理静态输入文件，对 SFC 是“盲”的。
- 开发时改 class 名，CLI 不触发重编译，样式不更新
- 构建产物里可能漏掉动态拼接的 class（如
:class="`p-${size}`"），除非你手动写进content配置 - 无法利用 Vite 的 HMR（热模块替换），改完 class 要刷新页面
必须配置 content 字段，且路径要覆盖 .vue 文件
tailwind.config.js 或 tailwind.config.ts 中的 content 是 Tailwind 扫描范围的唯一依据。漏掉 .vue 后缀，所有组件里的 class 都不会被识别。
- 正确写法：
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] - 错误写法：
content: ['./src/**/*.{js,ts}']（.vue 被跳过） - TS 项目建议用
tailwind.config.ts，但postcss.config.js必须保留 JS 格式（PostCSS 不支持 TS） - 如果用了
<style scoped></style>里的 class，也要确保它们出现在content扫描路径下，否则仍会丢失
@tailwindcss/vite 插件如何替代传统 PostCSS 配置
以前你得配 postcss.config.js + autoprefixer + tailwindcss，现在只需一个插件就能接管全部流程。
- 在
vite.config.ts里导入并启用：import tailwindcss from '@tailwindcss/vite'，然后加进plugins数组 - 它自动注入 Tailwind 的 base/components/utilities，并把 autoprefixer 作为子流程运行
- 无需再手动写
postcss.config.js，删掉也不影响；但如果保留，内容必须是{ plugins: { '@tailwindcss/postcss': {} } }，否则会冲突 - 注意：
@tailwindcss/vite依赖tailwindcss@^3.4.0，低于这个版本可能不兼容 Vite 5+
样式入口文件必须用 @tailwind 指令，不能 import CSS
很多人在 main.ts 里直接 import 'tailwindcss/tailwind.css'，这会导致全量 CSS 被打包进 JS bundle，体积膨胀、无法 tree-shaking，而且和 content 扫描机制脱节。
- 正确做法：新建
src/style.css，只写三行：@tailwind base;、@tailwind components;、@tailwind utilities; - 然后在
main.ts中import './style.css' - 这样 Vite 才能将 Tailwind 解析为按需生成的 CSS，最终产物里只有你真正用到的类
- 如果项目已用 SCSS，可新建
src/style.scss，但指令必须保持原样（SCSS 支持@tailwind）
最容易被忽略的是 content 路径是否真实存在且可读——比如你写了 ./src/views/**/*，但实际目录是 ./src/pages/，那整个 views 下的 class 全部静默失效，连报错都没有。Tailwind 不会提示“没找到文件”，只会安静地生成一个空 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
