Tailwind CSS v4构建变慢主因是Oxide引擎被错误配置锁住：需确认版本≥4.0.0、删除mode/purge字段、content路径精准且为数组、Vite项目必须用@tailwindcss/vite插件、动态类名须safelist。
Tailwind CSS v4 构建变慢，基本不是引擎本身的问题，而是 Oxide 引擎被旧配置或错误集成方式“锁住”了——它再快，也跑不赢错配的 content、残留的 purge、或没启用的 Vite 插件。
确认是否真在用 v4 的 Oxide 引擎
v4 默认启用 Rust 编写的 Oxide 引擎，但这个默认只在正确集成路径下生效。如果构建仍卡顿，先验证底层是否真的切换过去了：
- 运行
npx tailwindcss -v，输出必须是v4.x.x（如v4.0.6），不是v3.x.x或带-jit后缀的版本 - 检查
package.json中"tailwindcss"版本号 ≥4.0.0，且没有残留@tailwindcss/jit或postcss-preset-env干扰 PostCSS 链 - Vite 项目中，
tailwind.config.js必须删除mode字段（v4 已彻底移除），且不能存在purge字段——留一个就降级回 JS 引擎
content 路径写错 = Oxide 引擎失能
Oxide 依赖静态扫描提取类名，路径错一点，它就“看不见”你的类，被迫 fallback 到全量生成，速度直接打回 v2 水平：
-
content必须是数组，不能是字符串或对象；值不能为空或只含注释 - Vue/Svelte/React 项目要显式列出扩展名：
./src/**/*.{ts,tsx,js,jsx,vue,svelte}，不能只写./src/**/* - 排除干扰路径必须用
!前缀：!./src/**/*.test.{ts,tsx}、!./node_modules（虽然 v4 默认跳过node_modules，但显式写上更稳） - 避免通配过宽：
./**/*.js会扫到dist/和build/下的产物文件，Oxide 不会跳过它们——I/O 开销照常发生
Vite 用户必须用 @tailwindcss/vite 插件
v4 对 Vite 做了深度适配，但前提是走官方插件路径。手动用 postcss-loader 或自定义 PostCSS 配置，等于绕过 Oxide 的增量监听和缓存机制：
立即学习“前端免费学习笔记（深入）”；
- 删掉
postcss.config.js（v4 + Vite 场景下它 90% 是问题源头） - 在
vite.config.ts中安装并注册插件：import { tailwindcss } from '@tailwindcss/vite'，然后加入plugins: [tailwindcss()] - 确保
optimizeDeps.include包含'tailwindcss'和'tailwindcss/plugin'，否则首次启动时 Vite 不预构建 Oxide 所需模块，页面加载卡顿十几秒 - 开发时不要加
TAILWIND_MODE=watch——v4 的插件自动处理 HMR，加了反而触发重复监听
动态类名未 safelist 就等于主动放弃 JIT
Oxide 引擎仍基于静态分析，className={`text-${size}-500`} 这种写法它完全无法推导，结果就是：开发时样式缺失、构建后 CSS 体积暴增（因为 fallback 到全量生成）：
- 优先改写为条件表达式：
className={size === 'sm' ? 'text-sm-500' : 'text-lg-500'} - 若必须动态，用
safelist显式声明正则：safelist: [/^text-(sm|lg|xl)-500$/, /^bg-(primary|secondary)$/] - 避免把整个颜色集都塞进
safelist，比如/^text-.+-500$/——这会让 Oxide 放弃裁剪逻辑，体积和 v2 无异 - 第三方 UI 库注入的类（如 Headless UI 的
data-[open]类）也要加进safelist，否则 HMR 更新后样式消失
最常被忽略的一点：v4 的 Oxide 引擎对 node_modules 内部路径非常敏感。如果你用了 pnpm 或 yarn pnp，且 tailwind.config.js 里 content 路径指向了 symlink 外的目录（比如通过 ../shared-ui 引入的组件），Oxide 可能根本扫不到那些文件——必须用真实路径或显式添加 resolve.alias 配合插件处理。
