tailwind css v4 用 rust oxide 引擎彻底重造编译链路，不再支持@tailwind指令，仅识别@import "tailwindcss"；废弃postcss.config.js，content自动扫描但需构建工具支持，@theme替代js配置并要求oklch色彩格式。
编译引擎从 JS 切换到 Rust Oxide，不再走 PostCSS
根本性变化不是“优化”，而是整条链路重造。@tailwind base、@tailwind components 这类指令在 v4 中完全不被识别——Oxide 引擎压根没实现解析逻辑。它只认 @import "tailwindcss" 这一条语句，且将其当作内置模块加载指令，由 Lightning CSS 直接处理嵌套、前缀补全和变量注入。
常见错误现象：@tailwind 写法不会报错，但 preflight 重置、表单默认样式、基础排版规则全都不生成；CI 构建成功，生产环境首页白屏或布局崩坏。
- 必须删掉所有
@tailwind指令，只留一条@import "tailwindcss" - 必须移除
postcss.config.js中的tailwindcss()插件，否则与 Vite 插件冲突，导致样式跳过或重复处理 - 旧项目若还用 Webpack + PostCSS 手动配置，需切到
@tailwindcss/postcss或直接用 Vite 插件
content 配置从手动维护变成自动扫描，但有前提条件
v4 的“自动 content 扫描”依赖构建工具劫持 ESM 模块图的能力，不是无脑遍历文件系统。Vite 插件能顺着 import './style.css' → import '@/components/Button.vue' → <template class="text-lg"></template> 这条链自动追踪，但仅限标准路径和语法。
容易踩的坑：
- 字符串拼接类名：
className={`bg-${color}-500`}—— Oxide 不解析运行时表达式，这类动态类名直接不生成 - 非标准引入：用
fs.readFileSync加载的 HTML 片段、require.context动态加载的组件，都不会被扫描到 -
tailwind.config.js里还留着content字段？它会被完全忽略，删掉更干净；但如果你用的是.astro或.svelte，就得显式配content，否则对应页面所有类名都缺失
@theme 替代 theme.extend，CSS 变量成第一公民
v3 的 theme.extend 是 JS 对象合并，v4 的 @theme 是纯 CSS 声明块，参与编译时解析，不经过 JS 运行时。这意味着颜色、断点、间距等设计令牌真正可运行时切换，但也带来新约束。
关键差异：
-
@theme必须写在 CSS 文件中（如src/index.css），不能在 JS 配置里定义 - OKLCH 色彩空间下，
--color-brand-500: #3b82f6这种 HEX 值会被跳过，必须写成--color-brand-500: oklch(65% 0.25 270)，否则brand-400/brand-600类不生成 - 自定义 CSS 里写了
calc(100% - var(--x))但--x未定义？v3 宽容跳过，v4 在 strict 模式下整条规则静默丢弃
增量构建快到微秒级，但只对真实变更敏感
Oxide 的快不是靠缓存，而是靠内存索引固化每个源文件的 AST 和类名引用关系。首次构建后，后续只比对 mtime 和内容 hash，变更感知粒度精确到字符。
实测数据：
- 无新增类名的保存：v3 耗时 35ms → v4 仅 192µs（注意单位）
- 新增一个
text-lg：v3 需 44ms → v4 只需 5ms - 这个速度不依赖你用没用 Vite，Webpack 用户也能直接受益
但前提是 content 配得准——漏配路径会导致 Oxide 回退全量扫描，性能优势荡然无存；误配宽泛路径如 ./src/**/* 会让扫描变慢，增量构建优势打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
