Tailwind CSS v3与v4版本在配置上有哪些关键差异？-css教程-PHP中文网

tailwind.config.js 必须保留且至少配置 content 字段，否则 jit 引擎无法提取类名导致样式丢失；v4 废弃 @tailwind 指令，改用 @import "tailwindcss"；主题变量迁移至 css 中的 @theme 块，支持运行时动态修改；dark: 变体依赖 content 扫描，不依赖 darkmode 配置。

tailwind css v3与v4版本在配置上有哪些关键差异？

tailwind.config.js 还要不要保留

要，但作用大幅缩水。v4 的 tailwind.config.js 不再是主题、断点、插件的主配置入口——这些都能挪到 CSS 里用 @theme 和 @layer 声明。但它仍必须存在，且至少得写 content 字段，否则 JIT 引擎找不到类名来源，生成的 CSS 会漏掉大量工具类。

常见错误现象：tailwind.config.js 被删或留空，开发时看着有样式，构建后部分 class（尤其是 dark:、hover: 等变体）完全不生效，且无任何报错提示。

如果你用 Vite + 标准 .jsx/.tsx 结构，content 可省略（Vite 插件自动探测），但加了更稳妥
若项目含 .astro、.svelte、服务端渲染的 .html 或动态字符串拼接类名（如 className={base + ' ' + variant}），content 必须显式列出路径
plugins 数组可为空，但用了 @headlessui/react 或表单库，就得手动加 require('@tailwindcss/forms')

@tailwind 指令为什么突然失效

因为 v4 的 Oxide 引擎根本不识别 @tailwind base、@tailwind components 这类指令。它只认 @import "tailwindcss" 这一条语句，并将其作为模块加载指令交由 Lightning CSS 处理。

常见错误现象：CSS 文件里还留着 @tailwind base，保存没报错，但页面没了重置样式（*、box-sizing 等全丢），排版直接崩。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须删掉所有 @tailwind 指令，包括注释里的残留
@import "tailwindcss" 要放在 index.css 最顶行，不能被 @layer 包裹，也不能在 @layer base 之后
如果还在 postcss.config.js 里配了 tailwindcss() 插件，要一并移除——它已被 @tailwindcss/postcss 替代，且旧插件会被 Oxide 忽略

@theme 块怎么替代 theme.extend

v4 把颜色、字体、间距等主题变量从 JS 配置抽出来，改用 CSS 自定义属性 + @theme 声明。这不只是写法变化，而是运行时可切换的底层能力升级。

旧写法（v3 tailwind.config.js）：theme: { extend: { colors: { brand: { 500: '#3b82f6' } } } } → 生成固定类名 text-brand-500；新写法（v4 src/index.css）：@theme { --color-brand-500: #3b82f6; } → 同样生成 text-brand-500，但可在 JS 中动态改：document.documentElement.style.setProperty('--color-brand-500', '#ef4444')。

OKLCH 色彩空间下，--color-brand-500 必须是 OKLCH 格式（如 oklch(65% 0.25 270)），不能直接写 HEX，否则色阶推导失败，brand-400/brand-600 类缺失
@theme 块必须在 @import "tailwindcss" 之前，否则变量不被识别
JS 动态修改变量后，无需重建 CSS，样式实时响应——这是 v3 完全做不到的

暗色模式 dark: 变体为何不触发

v4 默认启用 dark: 变体，但前提是 JIT 引擎能扫描到对应用法，比如 dark:bg-gray-800。如果 content 配置缺失或路径不全，这类 class 就不会被提取，最终生成的 CSS 里压根没有 .dark .bg-gray-800 规则。

常见错误现象：HTML 根节点已加 class="dark"，也写了 dark:bg-gray-800，但背景色始终不变。

确认 content 字段覆盖了所有含 dark: 的文件（尤其注意 JSX 中条件渲染、字符串模板）
v4 不再需要 darkMode: 'class' 配置项，但 dark: 变体依赖 content 扫描，不是开箱即用
如果用媒体查询触发暗色（@media (prefers-color-scheme: dark)），也要确保相关 class 出现在 content 路径下，否则照样不生成