tailwind.config.js 在 v4 中不可删除，仅 content 字段有效，其余字段（theme、plugins 等）已失效；样式生成依赖 @import "tailwindcss";（单引号+分号）、@plugin 和 @theme 块（带前缀、紧接 import 后、文件级作用域），顺序错误或语法偏差将导致类名静默不生成。
tailwind.config.js 在 v4 中不能废弃，只能删掉除 content 外的所有字段；真正驱动样式的配置必须写进 CSS 文件里，否则类名静默不生成——连报错都没有。
为什么删掉 tailwind.config.js 会导致样式全丢
Oxide 引擎只用 content 字段扫描 HTML/JSX 中出现的类名。没它，构建时根本不知道该生成哪些类，flex、text-lg、bg-primary 全部不会输出。但其他字段（theme、plugins、darkMode）在 v4 中已完全失效，删了也不会影响运行，留着反而会误导你“配置还在生效”。
-
content是唯一仍在起作用的字段，路径格式不变：["./src/**/*.{js,jsx,ts,tsx}"] - 删掉
theme、plugins、darkMode、contentSecurityPolicy等所有其他键 - 空文件可以保留，但不能删除整个
tailwind.config.js（截至 2026 年 9 月）
@import "tailwindcss" 必须写对，否则基础类全失效
v4 废弃所有 @tailwind 指令，改用标准 CSS @import 触发引擎。语法错一个字符，Oxide 就静默跳过，不报错也不生成任何工具类。
- 必须写成
@import "tailwindcss";（单引号 + 末尾分号，缺一不可） - 不能写成双引号：
@import "tailwindcss";→ 无效 - 不能漏分号：
@import "tailwindcss"→ 无效 - 不能拆成多行
@tailwind base/@tailwind components→ 完全忽略 - 必须放在主 CSS 入口文件顶部（如
src/index.css），且是第一个有效声明
@theme 块必须带前缀，且只能在同一 CSS 文件中生效
@theme 是 v4 中替代 theme.extend.colors 的核心机制，但它对变量命名和位置极其敏感。
- 变量名必须带标准前缀：
--color-primary✅，--primary❌，--my-color❌ -
@theme必须紧接在@import "tailwindcss";之后，不能跨文件、不能被注释隔开 - 值支持 OKLCH（如
oklch(0.62 0.15 274)）才能自动生成明度阶梯（primary-400/primary-600） - 如果你在
Button.css里写@theme，它不会影响Header.css—— 作用域是文件级的
插件如 @tailwindcss/forms 必须用 @plugin 声明在 CSS 中
v4 的 Oxide 引擎不读取 tailwind.config.js 中的 plugins: [] 数组，所有插件逻辑必须显式导入到 CSS 文件中。
- 旧写法：
plugins: [require('@tailwindcss/forms')]→ 完全忽略 - 新写法：在 CSS 入口文件中写
@plugin "@tailwindcss/forms";（同样要求单引号 + 分号） - 第三方插件（如
tw-animate-css）也需同样处理：@plugin "tw-animate-css"; - 自定义
addUtilities插件逻辑，改用@layer utilities声明
最容易被忽略的是顺序和作用域：@import → @plugin → @theme 必须严格按序出现在同一 CSS 文件开头，且不能被任何非声明语句打断。写错一个连字符或换行位置，类名就彻底消失，而控制台不会给你任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
