Tailwind CSS v4底层是Rust重写的Oxide引擎，非v3优化；@tailwind指令静默失效因引擎彻底移除PostCSS链，仅识别@import "tailwindcss"；增量构建快至192µs，依赖内存索引而非文件扫描。
Tailwind CSS v4 的底层不是“优化”，而是用 Rust 彻底重写——Oxide 引擎替换了 v3 全套 JavaScript 运行时，所有性能提升和行为变化都源于此。
为什么 @tailwind 指令在 v4 中静默失效
v3 依赖 PostCSS 插件逐条解析 @tailwind base、@tailwind components 等指令，靠 JS AST 遍历拼接生成 CSS；v4 的 Oxide 引擎压根没实现这套逻辑，它只识别一条原生语句：@import "tailwindcss"。这条语句在引擎内被当作模块加载指令，直接交由 Lightning CSS 处理嵌套、前缀补全与层叠合并。
常见错误现象：
-
@tailwind写法不会报错，但base层（如* { box-sizing: border-box }）完全不生效 - CI 构建成功，生产环境首页白屏或排版崩坏，排查发现 preflight 样式缺失
- 仍保留
postcss.config.js中的tailwindcss()插件，会与 v4 的 Vite 插件冲突，导致重复处理或静默跳过
Oxide 引擎如何把增量构建压进微秒级
v3 的 JIT 引擎每次保存都要重新扫描全部 content 路径、正则提取类名、哈希查重，哪怕只改一个空格也得重跑整套流程；Oxide 则在首次构建后，把每个源文件的 AST 和类名引用关系固化为内存索引，后续仅比对 mtime 和内容 hash。
实测关键点：
- 无新增类名的保存：
v3耗时 35ms →v4仅 192µs（注意单位是微秒） - 新增一个
text-lg：v3需 44ms →v4只需 5ms - 这个速度不依赖你用没用 Vite，是
Oxide自身内存模型决定的，Webpack 用户也能直接受益
自动 content 扫描为何仍可能漏样式
v4 的 Vite 插件启动时劫持 ESM 模块图，从 import './style.css' 开始顺着 import 链自动追踪含类名的文件——这很聪明，但只覆盖标准路径（默认 ./src/**/*.{js,jsx,ts,tsx}）。一旦项目含以下情况，就会漏生成对应类名：
- 使用
.astro、.svelte或服务端渲染的.html模板，且未显式配置content - 类名写在 JS 字符串里（如
className={isDark ? 'bg-gray-800' : 'bg-white'}），但该 JS 文件未被 import 链捕获 -
dark:变体未被扫描到，HTML 根节点又没加darkclass 或媒体查询不匹配，dark:bg-gray-800就不会出现在最终 CSS 中
最易被忽略的一点：v4 的 @theme 和 @layer 是真实 CSS 层叠层，不是模拟；但它们的声明顺序、位置（必须顶层、不可嵌套）、以及 OKLCH 色彩空间对色值格式的硬性要求（比如 --color-brand-500: #3b82f6 会被跳过，必须写成 --color-brand-500: oklch(65% 0.25 270)），这些细节一旦出错，不会报错，只会让样式“凭空消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
