vue 与 tailwind css 集成需配置路径扫描、构建工具适配和样式注入三者协同：正确设置 content 字段扫描 .vue 等文件，通过 main.css 引入三层 @tailwind 指令并全局 import，启用 content-based tree-shaking 或 jit 模式优化打包，动态 class 推荐对象语法，自定义组件应暴露 class prop。
Vue 与 Tailwind CSS 集成不是“装完就能用”的简单流程，关键在于配置路径扫描、构建工具适配和样式注入方式三者的协同。只要 content 配置正确、CSS 指令引入到位、构建插件启用无误，就能稳定产出所需类名，避免开发中样式丢失或打包后空白。
确保 Tailwind 能“看到”你的 Vue 模板
Tailwind 不会自动扫描所有文件，必须明确告诉它哪些文件里写了 class 名。content 字段就是这个“扫描清单”：
- Vue 2 项目通常写：
["./index.html", "./src/**/*.{vue,js,ts}"] - Vue 3（Vite）推荐写：
["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]，尤其要包含.vue后缀 - 若使用 TypeScript，
.ts和.tsx也需列入，否则组件内动态 class 可能被遗漏 - 在 Vite + @tailwindcss/vite 插件环境下，该配置仍需显式声明，插件不会自动推断
正确注入 Tailwind 的三层样式
仅安装依赖不够，必须让浏览器加载 base、components、utilities 三类基础样式：
