tailwind css v4 的“零配置”指主题、断点等可移至 css 层声明，但 content 扫描路径仍需在 tailwind.config.js 中显式配置，否则 jit 引擎无法识别类名来源，导致样式漏生成。
Tailwind CSS v4 的配置文件确实可以删到只剩空对象，但直接删掉 tailwind.config.js 并不等于“零配置”——它只是把配置权移交给了 CSS 层，而这个移交过程有明确的约束和隐含前提。
为什么 v4 声称“零配置”，却仍建议保留 tailwind.config.js
v4 的“零配置”指的是不再强制依赖 tailwind.config.js 来定义主题、断点或插件；所有这些都可以通过 @theme、@layer 和 @import "tailwindcss" 在 CSS 中声明。但实际项目中，你几乎总会需要显式控制 content 扫描路径：
-
content字段仍需在tailwind.config.js中声明，否则 JIT 引擎无法知道哪些 HTML/JSX 文件要扫描类名（v4 虽支持自动检测，但仅限于标准构建工具链如 Vite +@tailwindcss/vite插件，且默认只查./src/**/*.{js,jsx,ts,tsx}） - 如果你用的是自定义模板（如
.astro、.svelte或服务端渲染的.html），不写content就会漏掉类名，生成的 CSS 不完整 -
plugins数组虽然可为空，但一旦要用@headlessui/react或@heroicons/react这类依赖 Tailwind 工具类的库，就得手动加require('@tailwindcss/forms')等插件
@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；否则 Tailwind 会跳过色阶推导，导致brand-400/brand-600类缺失
删除 tailwind.config.js 后，哪些功能会静默失效
看似删了配置文件就能跑，但以下情况会导致样式不生成或行为异常，且无报错提示：
-
dark:变体失效：v4 默认启用暗色模式，但前提是你的 HTML 根节点有darkclass 或媒体查询匹配。如果没配content，JIT 引擎扫不到dark:bg-gray-800这类用法，就不会生成对应 CSS 规则 - 响应式断点未扩展：v3 中可通过
theme.extend.screens加xl2: '1440px'；v4 中必须用@theme { --breakpoint-xl2: 1440px; }，否则新增断点类（如xl2:flex）不会出现 - 自定义字体族无法生效：v3 写
theme.extend.fontFamily.sans = ['Inter', ...]；v4 必须写@theme { --font-family-sans: 'Inter', sans-serif; }，漏掉引号或逗号分隔就会被忽略
最常被忽略的一点：v4 的 @theme 块必须出现在 @import "tailwindcss" 之前，且不能嵌套在 @layer 内部——顺序错或作用域错，变量就进不了引擎上下文，后续所有基于它的工具类都不会生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
