Tailwind CSS v4构建速度跃迁源于Rust oxide引擎接管CSS处理链路，@import 'tailwindcss'触发二进制层token提取与层展开，改text-lg实测5ms内完成；但content未覆盖动态JSX时退化为100ms全量构建。
直接看构建耗时，别信“CSS体积小就快”
Tailwind的构建性能优势不体现在最终CSS文件大小，而在于增量编译速度。v4版本把整个CSS处理链路交给Rust写的oxide引擎，@import 'tailwindcss'触发的是二进制层token提取和层展开，不是JS解析AST。你改一个text-lg，v4实测5ms内完成；但如果你的content字段没覆盖到动态生成的JSX文件，它照样要全量扫描——此时退化成100ms级构建，和v3没区别。
浏览器渲染不能只看首屏时间
原生CSS在Lighthouse里可能显示“首次内容绘制”更快，但那是假象：传统方案往往打包了大量未用样式，CSSOM构建更重。Tailwind生成的CSS虽然HTML里类名多，但浏览器缓存复用率高、规则简单、匹配开销低。实测1000元素页面中，Tailwind的样式计算时间比传统CSS低35%，内存占用少6MB左右。关键点在于：Lightning CSS默认启用strict模式，遇到calc(100% - var(--x))这种非法表达式会直接中断构建，而旧版JIT会跳过——这反而暴露了你真实存在的兼容性问题。
迁移时最容易被忽略的静默失效
v4废弃了@tailwind base这类指令，但它们不报错，只是样式静默失效。CI能过，生产环境缺重置样式。必须做三件事：
- 删掉所有
@tailwind指令，包括注释里的残留 - 确认
vite.config.js里已注册tailwindcss()插件（Vite用户）或@tailwindcss/postcss（PostCSS用户） - 检查是否还留着
@layer base等手动覆盖逻辑——v4的@theme规则优先级更高，可能意外覆盖你的重置
tree-shaking不是开关，是路径依赖
v4的tree-shaking激进得多：没出现在content匹配路径里的工具类，连定义都不会生成。但content字段在v4中可省略——仅限Vite等支持自动路径发现的环境；Webpack或自定义流程仍需手动补全，比如src/**/*.{ts,tsx}。漏写一个pages/目录，对应页面的bg-red-500就彻底消失，且无任何警告。
立即学习“前端免费学习笔记（深入）”；
