如何在Tailwind CSS v4中迁移旧版配置文件？-css教程-PHP中文网

tailwind css v4 oxide 引擎仅读取 tailwind.config.js 中的 content 字段，theme、plugins 等全部被静默忽略；主题需用 @theme 块在 css 中声明带前缀变量，插件须用 @plugin 指令引入，且 @import "tailwindcss"; 必须位于 css 入口顶部。

如何在tailwind css v4中迁移旧版配置文件？

tailwind.config.js 里只剩 content 字段有用

Tailwind CSS v4 的 Oxide 引擎完全不解析 tailwind.config.js 中的 theme、plugins、darkMode 等字段，只读取 content 用于扫描类名路径。你写在 JS 文件里的 theme.extend.colors.primary 或 plugins: [require('@tailwindcss/forms')] 全部被静默忽略——连 warning 都不抛，样式直接不生成。

迁移第一步就是删掉所有非 content 字段：

删掉 theme 块（包括 extend）
删掉 plugins 数组
删掉 darkMode、contentSecurityPolicy、corePlugins 等任何其他配置项
只保留 content 数组，确保它仍覆盖你的模板/组件路径（如 ./src/**/*.{ts,tsx,jsx,html}）

@import "tailwindcss" 必须出现在 CSS 入口顶部

真正驱动样式的入口不再是 JS 配置，而是你项目主 CSS 文件（如 src/styles/tailwind.css）中的 @import "tailwindcss";。这行必须存在、必须用单引号、必须带分号，且必须是文件最顶部（不能被注释或空行隔开）。

常见错误：

写成 @import "tailwindcss"（缺分号）→ 构建失败或静默跳过
写成 @import "tailwindcss/index.css" → 找不到模块
放在 @theme 后面 → @theme 变量无法被识别
混在 PostCSS 导入中（如 @import 'postcss-nested'）→ Oxide 不处理这类导入

@theme 块必须用标准 CSS 变量前缀

所有主题定制（颜色、间距、字体等）必须挪到 CSS 文件中，用 @theme 声明，且变量名必须带完整前缀：--color-primary ✅，--primary ❌。Oxide 引擎只认标准命名空间，否则类名（如 bg-primary）根本不会生成。

Pandas 配置文件报告生成器

使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。

下载

示例正确写法：

@theme {
  --color-primary: #3b82f6;
  --spacing-8: 2rem;
  --font-sans: ui-sans-serif, system-ui;
}

注意：

@theme 必须紧跟在 @import "tailwindcss"; 后面（中间可有空行，但不能有其他 @ 规则）
不能引用其他 CSS 变量（如 --color-primary: var(--my-blue)），Oxide 不支持变量计算
自定义字体族、断点等需用 @config，但它只能放 @import 前，且只接受静态值

@plugin 必须写在 CSS 里，不能靠 JS 注册

插件如 @tailwindcss/forms、@tailwindcss/typography 不再通过 plugins: [] 注册，而要用 @plugin 指令直接写进 CSS 文件：

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@theme {
  --color-primary: #3b82f6;
}

关键点：

@plugin 的字符串必须和 npm 包名完全一致（含作用域），比如 @plugin "@tailwindcss/forms"，不是 @plugin "tailwindcss-forms"
插件包必须已安装（pnpm install @tailwindcss/forms），否则构建报错
旧版自定义插件（如用 addUtilities 写的）得重构成 @layer utilities 块

最容易被忽略的是：所有这些变更都发生在 CSS 层，JS 配置彻底退居二线。哪怕你保留了完整的旧 tailwind.config.js，只要没在 CSS 里写 @import 和 @theme，类名就一个都不会出来——没有错误提示，只有空白样式。