<p>Tailwind CSS v4 的配置必须写在 .css 文件中,因 Oxide 引擎仅解析 CSS 里的 @theme、@utility 等标准 at-rule,跳过 tailwind.config.js;变量需带 -- 前缀并在 @theme 块内声明,且 @import "tailwindcss" 必须前置;VSCode 插件需手动配置 config file 路径。</p>

因为 Tailwind CSS v4 的核心配置不再由 JavaScript 解析,而是由 Oxide 引擎直接扫描 CSS 源码中的 @theme、@utility 等指令——这些指令本身就是标准 CSS at-rule,必须写在 .css 文件里才能被识别和编译。
为什么 tailwind.config.js 不能继续用
Oxide 引擎(Rust 编写的全新编译器)在构建阶段完全跳过 JS 配置文件,不执行、不解析、不报错。它只读取 @import "tailwindcss" 后的 CSS 文件,并从中提取 @theme 变量、@utility 规则等。哪怕你保留 tailwind.config.js 并写了 theme.extend.colors.primary,只要没在 CSS 里声明 @theme { --color-primary: #3b82f6; },bg-primary 就不会生成。
使用ydata-profiling(前身为pandas-profiling)生成全面的数据质量报告,包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
@theme 必须写在 .css 文件里的硬性约束
-
@theme是一个 CSS at-rule,语法上必须出现在合法的 CSS 上下文中;JS 文件里写它会被当作无效注释或语法错误 - 变量名必须带前缀(如
--color-、--breakpoint-),且只能在@theme块内声明,CSS 解析器才能将其映射为工具类 - 多个
.css文件中的@theme会自动合并,但跨文件引用需靠 CSS 变量链(如@theme inline),JS 配置无法参与这个链路 -
@import "tailwindcss"必须在同一文件中出现在@theme之前,顺序错就等于没写
后缀改 .css 不是“换名字”,而是配置语义的归位
以前把颜色、断点写在 JS 里,本质是用 JS 模拟 CSS 主题能力;v4 把这件事交还给 CSS 本身:
- --breakpoint-sm: 480px → 自动支持 sm:flex
- --color-primary: oklch(0.62 0.15 274) → 自动生成 text-primary、bg-primary 等类
- @utility sr-only { @apply absolute w-1 h-1 p-0; } → 直接产出 sr-only 类,无运行时开销
这些能力都依赖 CSS 原生语法,不是 JS 能“模拟”出来的。
最容易被忽略的是:VSCode 插件默认仍找 tailwind.config.js,删掉它后必须手动设置 "tailwindCSS.experimental.configFile" 指向你的主 CSS 文件,否则智能提示会失效——这不是插件坏了,是路径没对上。

















