tailwind css v4 alpha 用 css 原生机制替代配置文件：@import 'tailwindcss' 替代 @tailwind 指令，@theme 规则需带 --color-、--font- 等前缀，tailwind.config.js 仅保留 content 字段，暗色模式基于 css 变量运行时切换。
Tailwind CSS v4 Alpha 版的“新语法”不是加了什么新 class，而是整个配置逻辑被重写：它不再依赖 tailwind.config.js 解析颜色、字体、断点等，而是靠 CSS 中的 @theme、@import 和原生变量来驱动。你写错一个连字符或漏掉前缀，样式就根本不会生成。
为什么 @import 'tailwindcss' 替代了 @tailwind base
v4 废弃了所有 @tailwind 指令，因为 Oxide 引擎不走 PostCSS 插件链，而是直接解析标准 CSS @import。旧写法会静默失效——没有报错，但 text-lg、flex 这类基础类全都不出现。
- 必须写成
@import 'tailwindcss';（末尾分号不能少，引号必须是单引号） - 不能再拆成
@tailwind base; @tailwind components;，也不支持@layer手动包裹 - 如果项目里还混着 PostCSS 插件（比如
postcss-import），得彻底删掉，否则可能重复解析或冲突
@theme 规则里变量名必须带前缀，否则无效
@theme 块里的自定义属性不是随便起名就能被识别的。Oxide 引擎只扫描特定前缀的变量，并据此生成工具类。写错前缀 = 白写。
- 颜色必须用
--color-开头：✅--color-primary: #3b82f6;→ 生成text-primary、bg-primary - 字体必须用
--font-开头：✅--font-sans: 'Inter', sans-serif;→ 生成font-sans - 间距/尺寸用
--spacing-或--size-：✅--spacing-6: 1.5rem;→ 生成p-6 - ❌
--primary: #3b82f6;或--my-color: ...完全不会触发任何类生成
JS 配置文件只剩 content 字段兜底，其他全被忽略
tailwind.config.js 在 v4 中是可选的，且仅用于两个目的：提供 content 路径（当自动扫描失败时），以及启用 JS 兼容层（不推荐）。其他字段如 theme.extend.colors、variants、plugins 全部被 Oxide 引擎跳过。
- 如果你保留了
tailwind.config.js并写了theme: { extend: { colors: { brand: '#1677ff' } } }，这个brand不会生成任何类 -
content字段现在只是 fallback：v4 默认扫描.html、.tsx、.vue、.mdx等，甚至能识别 JS 字符串中的className="bg-blue-500" - 想强制禁用自动扫描？可以设
content: []，但绝大多数项目根本不需要碰它
暗色模式和动态主题切换靠的是 CSS 变量运行时更新
v4 的暗色模式默认启用，且不依赖 darkMode: 'class' 或 'media' 配置。它直接监听 :root 或 html 上的 color-scheme 或自定义属性变化，再联动类名。
- 要支持手动切主题，只需在 JS 里改变量：
document.documentElement.style.setProperty('--color-primary', '#ef4444'); - 暗色变体如
dark:bg-gray-800仍可用，但它的触发条件是元素匹配[data-theme="dark"]或系统级prefers-color-scheme: dark - ⚠️ 注意：不要在
@theme里写var(--dark-bg)这种嵌套变量——Oxide 不解析运行时值，只认字面量 HEX / RGB / OKLCH
最易被忽略的一点：v4 的 @theme 块必须出现在 @import 'tailwindcss'; 之后，且不能被 @layer 包裹——否则变量提取失败。顺序错了，整个主题就消失，而且没有任何构建警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
