用 @tailwindcss/vite 插件并删除 postcss.config.js，可启用 Vite 原生 JIT 模式，提升构建速度 30%~50%，避免全量 CSS 重生成；需精准配置 content 路径、预构建 tailwindcss 相关依赖，并通过终端日志验证 JIT 是否生效。
直接用 @tailwindcss/vite 插件，别配 PostCSS —— 这是 Vite 项目里 Tailwind 构建最快的路径，尤其在 v4 之后，JIT 已深度绑定 Vite 模块图谱，绕过 PostCSS 中间层能省掉 30%~50% 的 CSS 处理开销。
为什么不用 postcss.config.js？
PostCSS 配置在纯 Vite 项目中不仅多余，还容易触发构建降级：一旦存在 postcss.config.js，Vite 就会跳过内置的 Tailwind 插件链，改走传统 PostCSS 流程，导致 JIT 失效、热更新变慢、甚至生成全量 CSS。常见症状包括：
- 终端启动时看不到
Using JIT (Just-In-Time) mode - 修改一个
text-red-500类后，整个 CSS 文件重生成（而非增量注入） -
node_modules/.vite下没有tailwindcss_*.js缓存文件
如果你没手动创建过 postcss.config.js，就别碰它；如果已有，删掉即可。
必须确保 content 路径精准匹配源码结构
这是构建后样式丢失和本地加载慢的头号原因。Tailwind v4 的 JIT 引擎靠 content 字段扫描文件提取类名，漏一个扩展名或路径层级，对应 class 就不会进编译范围。
立即学习“前端免费学习笔记（深入）”；
- Vue 项目必须包含
.vue：例如./src/**/*.{vue,js,ts,jsx,tsx} - React/TSX 项目漏掉
.tsx→ 组件内动态类名（如text-${size}-500）不生效 -
./index.html必须显式列出，否则 HTML 中的 class 不被扫描 - 路径必须以
./开头，写成src/**/*会被 Vite 忽略
配置示例（tailwind.config.ts）：
import type { Config } from 'tailwindcss'
export default {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: { extend: {} },
plugins: [],
} as Config
vite.config.ts 中要显式启用 optimizeDeps.include
Vite 首次加载慢，常因 tailwindcss 及其插件未被预构建。浏览器请求 tailwind.css 时，Vite 才临时解析并编译，大量小文件排队阻塞渲染。
- 在
vite.config.ts的optimizeDeps.include中加入：['tailwindcss', 'tailwindcss/plugin'] - 避免在
main.ts或main.tsx中直接import 'tailwindcss/tailwind.css'，改用@import 'tailwindcss/base';写进你的主 CSS 文件（如src/index.css） - 确认终端输出有
Pre-bundling dependencies: tailwindcss, tailwindcss/plugin
这样能让 Vite 在启动阶段就把 Tailwind 插件链预构建好，后续热更新几乎无感知。
最后检查 JIT 是否真在跑
真正影响速度的从来不是“缓存开了没”，而是 JIT 扫不扫得到、预构建包有没有包含插件核心。每次保存后看终端日志：如果只看到少量新增类名被注入（比如 [tailwindcss] added text-lg, bg-blue-600），说明 JIT 正常；如果动不动就刷出几百行 CSS 输出，那一定是 content 漏了路径，或者 postcss.config.js 还在干扰流程。
