删掉tailwind.config.js后能跑起来不等于真“零配置”，而是将配置移至CSS中，需严格遵循@import 'tailwindcss';（单引号+分号）、@config/@theme顺序与语法规范，且content、plugins等仍需JS文件兜底。
删掉 tailwind.config.js 后能跑起来，不等于真“零配置”——它只是把配置从 JS 搬进了 CSS，且对语法、顺序、作用域极其敏感。静默失效是常态，报错反而是例外。
@import 'tailwindcss' 必须写对，否则整个引擎不启动
这是最常踩的坑：v4 彻底废弃 @tailwind 指令，只认标准 CSS @import 语句。写错一个字符，所有工具类（text-lg、flex、bg-blue-500）都会消失，且无任何提示。
- 必须写成
@import 'tailwindcss';（单引号 + 末尾分号，缺一不可） - 不能用双引号：
@import "tailwindcss";→ 静默失败 - 不能漏分号：
@import 'tailwindcss'→ 静默失败 - 不能拆成多个
@import或混用旧式@tailwind base等指令 - 构建工具（Vite/Next.js）必须识别到该
@import所在的主 CSS 文件，否则直接跳过处理
@theme 变量名有硬性前缀规则，拼错就无效
@theme 是 v4 主题定义的唯一合法入口，但它不是自由命名的 CSS 变量——必须带标准前缀，且值格式影响衍生类生成。
- 正确写法：
--color-primary、--spacing-8、--breakpoint-xl - 错误写法：
--primary、--my-spacing、--COLOR-primary→ 不生成任何对应工具类 - 颜色值推荐 OKLCH（如
oklch(0.62 0.15 274)），才能自动推导primary-400/primary-600等明度阶梯；HEX 或 RGB 值仅生成primary单一层级 -
@theme必须出现在@import 'tailwindcss';之后，同一 CSS 文件内；跨文件声明不合并
@config 和 @theme 不能混用，且作用域严格隔离
@config 是静态声明区，@theme 是运行时可变区，二者语法、时机、能力完全不同，混写或错位会导致部分配置被忽略。
-
@config必须写在@import 'tailwindcss';之前，只接受静态字面量：theme.colors: { primary: '#3b82f6' }，不支持函数、变量引用、字符串拼接 -
@theme必须写在@import之后，变量可被 JS 动态修改（如document.documentElement.style.setProperty('--color-primary', '#ef4444')），但仅限已声明的合法前缀名 - 两个指令都只影响当前 CSS 文件作用域：你在
Button.css里写的@theme，不会让Header.css中的bg-primary生效 -
content、plugins、darkMode等字段仍需靠tailwind.config.js提供——它没消失，只是降级为“兜底配置”
VSCode 插件和编辑器提示会罢工，除非手动指定入口 CSS
零配置不等于零设置：Tailwind IntelliSense 默认找 tailwind.config.js，删掉后它就停摆，连基础类名补全都失效。
- 必须在 VSCode 设置中显式配置：
"tailwindCSS.experimental.configFile": "src/styles/main.css"（路径指向含@import 'tailwindcss';的主 CSS 文件） - 若项目有多个入口 CSS（如按主题拆分），IntelliSense 只认你指定的那一个，其余文件无提示
- Vite / Next.js 等构建工具插件（如
@tailwindcss/vite）虽能运行，但不解决编辑器体验问题
真正容易被忽略的，不是“怎么写”，而是“写在哪”和“谁看得见”：v4 的配置是文件作用域的、CSS 语法驱动的、静默生效的。一个 @import 位置偏移、一个连字符写错、一个编辑器路径没配对，就会导致样式彻底消失，而你可能要花半小时才意识到问题不在代码逻辑，而在那一行分号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
