因为Tailwind CSS v4的Oxide引擎只识别标准CSS @import语句,废弃所有@tailwind指令;@import必须用单引号并带分号,否则静默失效,且@theme必须紧随其后在同一文件中声明带合法前缀的变量。

必须在主 CSS 入口文件里写 @import 'tailwindcss';,再紧跟着写 @theme 块,否则所有自定义工具类(如 bg-primary、text-sans)静默不生成——不报错,也不警告,就是没样式。
为什么 @import 'tailwindcss'; 不能写成 @tailwind base
v4 的 Oxide 引擎彻底废弃了所有 @tailwind 指令。它只识别标准 CSS @import 语句,且语法极其严格:
-
@import必须用单引号:@import 'tailwindcss';(双引号或无引号直接失效) - 末尾分号不可省略;漏掉就等于没写
- 不能再拆成
@tailwind base;+@tailwind components;+@tailwind utilities;—— 这些语句被完全忽略 - 如果项目还装着
postcss-import,必须彻底卸载,否则可能重复解析或覆盖规则
@theme 变量名必须带前缀,拼错一个连字符就无效
Oxide 引擎只扫描特定命名空间的 CSS 自定义属性,且大小写、连字符、前缀缺一不可:
- 颜色:必须以
--color-开头 →--color-primary: #3b82f6;→ 生效bg-primary - 字体:必须以
--font-开头 →--font-sans: 'Inter', sans-serif;→ 生效font-sans - 间距/尺寸:用
--spacing-或--size-→--spacing-6: 1.5rem;→ 生效p-6 - 断点:用
--breakpoint-→--breakpoint-sm: 480px;→ 自动生成sm:变体 - ❌ 错误示例:
--primary: #3b82f6;、--my-color: #ef4444;、--colorprimary(少连字符)——全部被跳过
@config 和 tailwind.config.js 各管什么,顺序为什么致命
@config 是纯静态声明区,tailwind.config.js 现在只剩两个作用:指定 content 扫描路径、加载插件(如 daisyui)。其他字段(包括 theme.extend.colors)v4 中完全不读取:
立即学习“前端免费学习笔记(深入)”;
-
@config必须出现在@import 'tailwindcss';之前,否则无效;它只支持theme.colors、theme.spacing等基础键,不能引用变量或拼接字符串 -
@theme必须写在@import 'tailwindcss';之后,且必须在同一 CSS 文件内(跨@import的其他 CSS 文件不生效) - 二者共存时,
@theme声明的颜色会覆盖 JS 配置里的同名项——不是因为优先级高,而是 JS 那部分压根没被读 - VSCode 插件默认找
tailwind.config.js,删了它就得手动设"tailwindCSS.experimental.configFile"指向主 CSS 文件(如src/index.css)
最容易被忽略的是:变量作用域是文件级隔离的。你在 Button.css 里写的 @theme,对 Header.css 完全不可见。全局主题必须统一收口到项目唯一的入口 CSS,并严格保证 @import → @config → @theme 的顺序,错一位,整套变量就归零。



















