Tailwind CSS v4因采用Rust编写的Oxide引擎,仅识别@import 'tailwindcss'作为入口指令,@tailwind指令、postcss.config.js和tailwind.config.js均被绕过;旧写法被静默忽略而不报错,导致基础工具类不生成。

因为 Tailwind CSS v4 不再走 PostCSS 插件链,而是用 Rust 写的 Oxide 引擎直接解析 CSS 文件 —— @import 'tailwindcss' 是它唯一认的入口,@tailwind 指令、postcss.config.js、甚至 tailwind.config.js 都被绕过了。
为什么 @tailwind base 在 v4 里不报错却没样式?
Oxide 引擎根本不会识别 @tailwind 这类指令,它只响应 @import 'tailwindcss'。旧写法会被 CSS 解析器当作普通注释或无效规则跳过,既不报错也不生成任何 CSS。
- 常见现象:构建成功、浏览器无报错,但
text-gray-500、flex等基础类全失效 - 关键点:
@import 'tailwindcss'必须出现在 CSS 文件最顶部,不能套在@layer或@media里 - 如果用了
@layer base手动覆盖,v4 的@theme规则会优先级更高,旧覆盖逻辑可能被静默忽略
为什么 postcss.config.js 被完全忽略?
v4 的构建流程由 tailwindcss() 插件(如 @tailwindcss/vite)接管,从 content 扫描、类名提取到 CSS 输出全部在 Oxide 内完成,PostCSS 配置文件压根不加载。
- 即使你保留
postcss.config.js并配了autoprefixer,也不会生效 —— v4 已内置前缀补全,且按browserslist自动处理 - 更危险的是:同时启用
postcss()和tailwindcss()插件,会导致 CSS 被重复处理,出现 hover 变体丢失、伪类不触发等问题 -
tailwindcss()插件必须放在 Vite 插件数组靠前位置,否则其他 CSS 处理插件(如less())可能提前编译,让 Oxide 失去 JIT 编译机会
v4 的 @import 'tailwindcss' 到底做了什么?
这不是传统 CSS 导入,而是 Oxide 的启动开关:它自动加载 base / components / utilities 三层,并激活 JIT 编译、@theme 解析、@plugin 注册等全部能力。
立即学习“前端免费学习笔记(深入)”;
-
@import 'tailwindcss' important相当于 v3 的important: true -
@theme块里的--color-primary会自动生成text-primary,但变量名必须带前缀(--color-、--font-),否则引擎不识别 - 不再需要
content字段 —— Oxide 默认扫描src/**/*.{js,ts,jsx,tsx,vue},路径扩展用@source指令即可
最容易被忽略的不是“删配置”,而是 @import 的位置、插件顺序、以及 CSS 变量命名规范 —— 这三处出错,样式就静默消失,连控制台都不会提醒你。


















