因为tailwind css v3.0+已默认启用jit，mode: 'jit'字段被彻底移除，保留会导致配置错误；必须删除该行，并确保版本≥3.0.0、content路径精准覆盖源码文件。
为什么 tailwind.config.js 里开了 mode: 'jit' 没用？
因为从 Tailwind CSS v3.0 开始，JIT 编译器已默认启用，mode: 'jit' 这个配置项被彻底移除。如果你在 Vite 项目中用的是 v3.0+，根本不需要手动开启——只要正确安装并引入，它就自动 JIT。
常见错误是照着旧教程在 tailwind.config.js 里硬加 mode: 'jit'，结果启动时抛出 Invalid configuration: "mode" is not allowed。删掉这行就行。
- 检查 Tailwind 版本：
npm list tailwindcss，v3.0+ 直接忽略mode - v2.x 升级到 v3 时，务必删除
mode字段和purge字段（已被content替代） - Vite 的 HMR 与 Tailwind JIT 天然契合：新增的 class 名称保存即生效，无需重启 dev server
怎样让 @apply 在 Vue/React 组件的 <style></style> 块里正常工作？
Vite 默认不会处理 <style></style> 块里的 Tailwind class 引用，@apply 会报 Unknown at rule @apply 或编译后样式丢失。关键在于 PostCSS 配置是否穿透到了组件内样式。
必须确保 postcss.config.js 存在且内容正确，并被 Vite 识别：
- 根目录下要有
postcss.config.js，内容至少包含：module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } - Vue 项目需确认
vite-plugin-vue（或@vitejs/plugin-vue）版本 ≥ 4.0，老版本不支持<style></style>中的 PostCSS 处理 - React 项目若用
@vitejs/plugin-react，默认已集成 PostCSS 支持，但需确保没有禁用css.postcss配置 - 如果用了
css.modules，@apply仍可用，但生成的选择器会带 hash，不影响功能
为什么新增的 class 在浏览器里不生效，要重启 Vite 才行？
大概率是 tailwind.config.js 的 content 字段没覆盖到你写 class 的文件路径。JIT 模式只扫描 content 列出的文件，漏掉就“看不见”新 class。
典型漏配场景：
- Vue 项目写了
content: ['./index.html']，但 class 全在.vue文件里 → 应改为['./index.html', './src/**/*.{vue,js,ts}'] - React + TypeScript 项目漏了
.tsx→content必须显式包含.tsx - 路径用了相对路径如
../src，而配置文件在子目录 → 统一用项目根目录为基准，推荐path.resolve(__dirname, 'src/**/*.{js,jsx,ts,tsx,vue}') - 开发时动态拼接 class（如
class="text-${color}-500"），JIT 无法静态分析 → 改用class="text-red-500 text-blue-500"显式写出，或配合safe-list
如何安全使用动态 class 字符串而不被 JIT 删除？
JIT 默认只保留实际出现在源码中的 class，字符串拼接、变量插值等运行时行为会被剔除。这不是 bug，是设计使然。要保留特定模式，得靠 safe-list。
例如你有一组颜色变量 ['red', 'blue', 'green']，想动态生成 bg-${color}-500：
- 在
tailwind.config.js的content同级加safeList：
safeList: [
{ pattern: /bg-(red|blue|green)-500/ },
{ pattern: /text-(sm|md|lg)/ },
]
注意：safeList 是正则数组，不是 glob；匹配的是最终生成的 class 名（不是模板字符串）；过度使用会增大 CSS 体积，只加真正需要的。
更轻量的替代方案：把常用组合提前写死在某个空组件或工具函数里，让 JIT “看见”它们，比如在 src/utils/tailwind-helpers.ts 里写 const _ = 'bg-red-500 bg-blue-500 text-sm text-md'; —— 不用真调用，只为触发扫描。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
