必须写成@import 'tailwindcss';,因v4废弃所有@tailwind指令,Oxide引擎仅识别标准CSS @import;旧写法静默失效,基础工具类不生成,且@theme变量须带--color-、--font-等前缀才生效。

@import 必须写对,@theme 必须写在它后面,否则所有自定义类(如 bg-primary、text-sans)根本不会生成——不是报错,是静默失效。
为什么 @import 'tailwindcss' 不能写成 @tailwind base
v4 废弃了全部 @tailwind 指令,Oxide 引擎只识别标准 CSS @import 语句。旧写法不会报错,但 text-lg、flex 这类基础工具类全都不出现。
- 必须写成
@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: ...完全无效
@config 和 tailwind.config.js 各管什么?
@config 是纯 CSS 内联配置,只影响当前文件;tailwind.config.js 现在只剩两个作用:指定 content 扫描路径(当自动检测失败时),以及加载插件(如 daisyui)。其他字段全被跳过。
-
@config必须出现在@import 'tailwindcss';之前,顺序错 = 没写 -
@config支持theme.colors、theme.spacing等静态项,但不支持plugins、darkMode、content -
tailwind.config.js中的theme.extend.colors在 v4 中完全不参与编译,哪怕文件存在也无效 - 二者共存时,
@theme声明的颜色会覆盖 JS 配置里的同名项——不是因为优先级高,而是 JS 那部分压根没被读
VSCode IntelliSense 和构建工具为啥罢工?
不是插件坏了,是路径或顺序没对上。v4 默认不找 tailwind.config.js,它只认 CSS 入口文件里的 @import 和 @theme。
立即学习“前端免费学习笔记(深入)”;
- VSCode 插件默认扫描
tailwind.config.js,删了它就得手动设置"tailwindCSS.experimental.configFile"指向主 CSS 文件(如src/styles/main.css) - Vite / Next.js 若没识别到含
@import 'tailwindcss';的入口 CSS,会静默跳过所有 Tailwind 处理 -
@theme必须和@import 'tailwindcss';在同一文件中,跨@import引入的 CSS 不会继承@theme作用域
@theme 和 @import 的相对位置,以及变量名前缀的精确拼写——这两个点错了,整个主题系统就停摆,且没有任何提示。


















