必须用@import 'tailwindcss';启动Oxide引擎,旧@tailwind指令静默失效;@theme变量须紧随其后、带--color-等前缀才生效,且tailwind.config.js中theme配置不再参与编译。

必须用 @import 'tailwindcss'; 启动 Oxide 引擎
旧写法 @tailwind base、@tailwind utilities 全部失效,不是报错,是静默跳过——text-lg、flex、bg-red-500 一个都不会生成。Oxide 引擎只认标准 CSS @import 语句,且必须写成单引号 + 分号:@import 'tailwindcss';。如果项目里还装着 postcss-import,得删掉,否则可能重复解析或覆盖 @import 逻辑。
@theme 变量名必须带前缀,拼错就等于没写
Oxide 引擎只扫描特定前缀的自定义属性,其他一概忽略:
- 颜色 → 必须以
--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; 这类写法完全无效,连 warning 都没有。
@theme 必须紧接 @import 之后,顺序错 = 静默失效
变量声明的位置和顺序比内容更重要:
立即学习“前端免费学习笔记(深入)”;
-
@theme必须写在同一个 CSS 文件中,且必须出现在@import 'tailwindcss';的下一行(或之后,但不能跨文件) - 如果
@theme写在@import前面,或者被包在@layer里,引擎直接跳过,不报错也不生成类 -
@config是另一个指令,它必须写在@import之前,但只影响当前文件;@theme则负责全局工具类生成
常见现象:写了 --color-primary 却没有 bg-primary —— 八成是顺序错了,而不是变量名或值的问题。
tailwind.config.js 几乎不参与主题生成
v4 中 JS 配置文件只剩两个作用:
- 指定
content路径(当自动扫描失败时) - 加载插件(如
daisyui、@tailwindcss/typography)
其他字段全被忽略:theme.extend.colors、darkMode、plugins、content(除了路径)都不再参与编译。哪怕你保留完整配置并写满 theme.extend.colors.primary: '#3b82f6',只要没在 CSS 里写 @theme { --color-primary: ... },bg-primary 就不会出现。
最容易被忽略的是:v4 不读 JS 配置里的主题,只信 CSS 里的 @theme —— 这不是 bug,是设计前提。



















