tailwind css v4 采用 css-first 架构，核心配置须通过 css 指令（如 @theme、@utility、@config）声明；tailwind.config.js 仅保留 content 扫描和插件加载功能，不再参与样式生成。
Tailwind CSS v4 并没有“放弃”JavaScript配置，而是把 tailwind.config.js 降级为可选兜底层——真正驱动样式生成的，只有 CSS 中的 @theme、@utility、@config 等指令。如果你还靠 JS 文件配颜色、字体或断点，那些配置大概率不会生效。
为什么 tailwind.config.js 配了但自定义类不生成
Oxide 引擎编译时根本不读 JS 配置，只扫描 CSS 源码里的指令。哪怕你保留 tailwind.config.js 并写了 theme.extend.colors.primary: '#3b82f6'，只要没在 CSS 里写 @theme { --color-primary: #3b82f6; }，bg-primary 就不会被生成。
-
@theme必须写在@import "tailwindcss"之后、且同一文件中（否则作用域不生效） - 变量名必须带标准前缀：
--color-、--font-、--spacing-、--breakpoint-，写成--primary或--my-color会被忽略 - OKLCH 色彩格式是默认推荐值，但 HEX、RGB、HSL 仍可用；不过
--color-brand-500: oklch(0.62 0.15 274)这种写法才能触发自动明度阶梯生成
@config 和 tailwind.config.js 谁优先级更高
tailwind.config.js 依然存在且优先级更高，但它只影响极少数字段：目前仅 content 路径扫描和插件加载（如 daisyui）还能走 JS 层；主题、变体、工具类定义等核心逻辑，JS 配置已完全失效。
-
@config是 CSS 内联配置，只作用于当前文件及其@apply调用，适合组件库隔离主题 -
tailwind.config.js若存在，仍会控制 CLI 的文件扫描范围，但不会影响text-primary这类类名是否生成 - 二者共存时，
@theme定义的颜色会覆盖tailwind.config.js中同名extend.colors—— 不是因为它“更优先”，而是因为 JS 那部分压根没参与编译
暗色模式、响应式、状态变体怎么配
v4 中这些能力全部迁移到 CSS 层，不再依赖 JS 插件或配置项。比如暗色模式默认启用，无需 darkMode: "class"；响应式断点直接用 @theme { --breakpoint-sm: 480px; } 声明即可。
-
@theme里定义的--breakpoint-sm会自动映射为sm:变体，不需要额外注册 - 暗色模式通过
[data-theme="dark"]或@media (prefers-color-scheme: dark)触发，dark:前缀类（如dark:bg-gray-800）开箱即用 - 自定义工具类用
@utility，支持嵌套（&:hover）、响应式（@lg）、暗色（@dark），例如：@utility sr-only { @apply absolute w-1 h-1 p-0; }
迁移时最容易漏掉的三件事
很多人升级后发现旧项目样式全崩，不是引擎问题，而是忽略了 CSS-first 的约束边界：
- 删了
tailwind.config.js却没补@theme块 → 所有自定义颜色/字体类消失 - 把
@theme写在@import "tailwindcss"之前 → Oxide 引擎跳过解析，静默失败 - 用
@plugin引入 daisyui 之类插件后，没检查其是否已适配 v4 的 CSS-first 架构 → 插件内部若还依赖 JSaddUtilities，就会报错或不生效
最麻烦的其实是路径扫描：虽然 content 字段已自动检测，但如果你的模板文件不在常规位置（比如 src/pages/*.vue），还是得靠 tailwind.config.js 显式声明——这个 JS 文件此时只剩这一个用途。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
