tailwind css v4 仍支持 tailwind.config.js，但仅限兼容用途：必须用 theme.extend 扩展主题、精简插件列表，且需通过 @config 指令显式加载；直接写 theme.colors 会清空默认色阶，@theme 块才是主配置路径。
Tailwind CSS v4 的主题配置方式变了——tailwind.config.js 不再是唯一入口，@theme 块直接写在 CSS 文件里才是官方推荐路径。但你仍可以用 JS 配置文件做兼容或复杂逻辑，只是得清楚两套机制的边界和限制。
tailwind.config.js 还能用吗？怎么写才不崩
v4 依然支持 tailwind.config.js，但它不再参与 JIT 编译的“主路径”。如果你用它，必须确保：
- 只通过
extend扩展主题，比如theme: { extend: { colors: { brand: '#6366f1' } } }；直接写colors: { ... }会清空所有默认色（bg-gray-100、text-blue-500全挂） - 插件列表保持精简，v4 的
@tailwindcss/vite插件已内置大部分能力，@tailwindcss/custom-forms这类旧插件可能不兼容 - 编辑器提示失效？复制一份 v3 风格的
tailwind.config.js仅用于类型提示，实际构建不读它——这是常见 workaround，不是 bug
@theme 块必须放在哪儿？语法有啥坑
@theme 必须写在 src/index.css（或你 import 的主 CSS 入口）里，且只能出现在 @import "tailwindcss" 之后、其他规则之前：
@import "tailwindcss";
@theme {
--color-brand-50: #f0f9ff;
--color-brand-500: #6366f1;
--color-brand-900: #1e3a8a;
}
@layer utilities {
.bg-brand-500 { background-color: var(--color-brand-500); }
}
注意：@theme 里不能写 JS 表达式或函数调用；所有变量名必须是合法 CSS 自定义属性名（如 --color-primary），不能用驼峰或数字开头；值必须带单位（如 1rem）或引号包裹字符串（如 "Inter"）。
颜色扩展必须手动声明完整色阶
哪怕只加一个品牌色，也得把 '50' 到 '900' 全写出来，Tailwind 不会推导：
extend: {
colors: {
'brand': {
'50': '#f0f9ff',
'100': '#e0f2fe',
'200': '#b6e3ff',
'300': '#7dd3fc',
'400': '#14b8a6',
'500': '#0d9488',
'600': '#0f766e',
'700': '#115e59',
'800': '#134e4a',
'900': '#16403e'
}
}
}
漏掉 '300'，bg-brand-300 就不会生成；键名含连字符（如 'light-blue'）必须加单引号，否则解析失败；十六进制值必须带 #，rgb() 或 hsl() 也得写全。
多主题切换别碰第三方插件
想支持深色/浅色/高对比度等多套主题，直接用 CSS 变量 + darkMode: 'class' 最稳：
- 在
:root和[data-theme="dark"]下分别定义--color-bg、--color-text - 配置里用
theme: { extend: { colors: { bg: 'var(--color-bg)', text: 'var(--color-text)' } } } - 切主题时只改
上的data-theme属性，不重启服务、不重编译
第三方主题插件（如 tailwindcss-theming）会劫持颜色解析链，导致 @apply 失效、DevTools 里变量追踪断层，而且 v4 升级后大概率直接报错。
最常被忽略的是：v4 的 @theme 块不支持嵌套对象或动态计算，所有值都得是静态字符串或 CSS 变量引用；而 JS 配置里的 theme() 函数也不能传变量名字符串去取值——它只认字面量键名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
