如何在Tailwind CSS v4预览版中配置零配置引擎_通过全新CSS-first方式设置-css教程-PHP中文网

零配置指默认从css中读取@config/@theme，删tailwind.config.js后需确保主css含正确顺序的@config和@import；darkmode需用@custom-variant手动声明；content、plugins等仍需js配置。

如何在tailwind css v4预览版中配置零配置引擎_通过全新css-first方式设置

零配置不是真的“不配”，而是把配置从 JS 文件挪进 CSS 文件里；只要你没写 @config 或 @theme，它才真算“零配”——但多数项目很快就会需要它们。

为什么 tailwind.config.js 消失了却还报错？

你删掉 tailwind.config.js 后运行 npm run dev，发现自定义颜色、断点或暗黑模式都不生效，不是插件坏了，是 v4 默认跳过 JS 配置扫描——它只认 CSS 里的 @config 和 @theme。CLI 新建项目不再生成该文件，但也不报错提醒你“该补配置了”。

VSCode 的 Tailwind IntelliSense 插件会直接罢工，除非你在设置里显式指定 "tailwindCSS.experimental.configFile" 指向主 CSS 文件（如 src/styles/main.css）
构建工具（Vite / Next.js）若未识别到 @import "tailwindcss" 所在的入口 CSS，会静默跳过所有 Tailwind 处理
@config 必须出现在 @import "tailwindcss" 之前，顺序错就等于没写

怎么用 @config 声明 colors 和 spacing？

@config 是 v4 新增的 CSS at-rule，语法像 JS 对象字面量，但只接受静态值：不能有函数、不能引用 CSS 变量、不能拼字符串。它只影响当前 CSS 文件作用域内的 @apply 和工具类生成，不污染全局。

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

支持项有限：theme.colors、theme.spacing、theme.fontSize、theme.borderRadius 等基础键，不支持 plugins、content、darkMode

写法示例：

@config {
  theme: {
    colors: {
      primary: "#3b82f6",
      secondary: "#64748b"
    },
    spacing: {
      "13": "3.25rem"
    }
  }
}

别漏掉分号——@config { ... }; 结尾必须有分号，否则 Lightning CSS 解析失败，整个文件被忽略

如何启用 darkMode: "class" 并让 .dark 生效？

v4 不再从 tailwind.config.js 读取 darkMode，也不支持在 @config 里设它。你需要手动声明一个自定义变体，并确保 HTML 根节点能被标记。

在主 CSS 文件中添加：
```
@custom-variant dark(&:is(.dark *));
```
这行代码告诉 Tailwind：当父级有 .dark 类时，为后代元素启用 dark: 前缀
必须在 HTML 的或上加 .dark 类，否则 dark:bg-gray-800 永远不会触发
如果你用 localStorage 记忆主题，请在首屏渲染前执行 JS，避免闪屏——document.documentElement.classList.toggle("dark", shouldDark) 要放在内联 script 中

哪些配置项根本不能用 CSS-first 替代？

不是所有 v3 的 JS 配置都能平移进 CSS。v4 的 CSS-first 是有明确边界的，越界就得回退到 tailwind.config.js。

content：路径扫描列表已移除，改用源码注释或 @source 指令（如 @source "./src/**/*.{ts,tsx}";），但它不支持 glob 动态匹配，只能写死路径
plugins：不能写在 @config 里，得用 @plugin "@tailwindcss/typography"，且插件本身需已适配 v4
safelist：完全移除，靠 @source + 源码中真实出现的类名来保障，注释里写 /* @class "bg-red-500" */ 也算数
环境变量、条件逻辑（比如根据 process.env.NODE_ENV 切换配色）——CSS 里没法做，必须保留 tailwind.config.js