dark:类在v4中默认失效，因移除darkMode配置项，须用@custom-variant dark(&:where(.dark,.dark*))声明；@apply不支持响应式/交互前缀，需改用原生嵌套语法；基础类未生效主因是content路径未覆盖源文件。
dark: 类在 v4 中默认不生效，hover:、focus: 等交互变体在 @apply 中会丢失前缀，text-4xl、bg-red-400 等基础类若未被 content 扫描到就直接消失——这不是你写错了，而是 v4 的按需生成机制更严格、更“沉默”。
为什么 dark: 类全部失效？
v4 彻底移除了 darkMode: 'class' 配置项，也不再自动识别 class="dark"。旧项目里写的 dark:bg-black 会被完全忽略，连警告都没有。
- 必须在 CSS 入口文件中
@import "tailwindcss"后，紧跟着加一行：@custom-variant dark (&:where(.dark, .dark *)); - 不能写成
@custom-variant dark (&.dark)——缺:where()会导致选择器权重爆炸，覆盖你自己的bg-white等声明 - HTML 根元素仍需有
class="dark"，不需要 JS 初始化，但漏掉它就等于没开暗色模式
@apply 里的响应式/交互类为什么会“消失”？
@apply 不是 CSS 原生语法，v4 的 Oxide 引擎不处理它——它只在 PostCSS 阶段由 Tailwind 插件展开。而 v4 默认绕过 PostCSS，改用 Lightning CSS 直接解析 @import，所以 @apply 只在明确启用 PostCSS 流程的项目中才有效（比如 Vite + @tailwindcss/vite 插件）。
- 写
@apply md:p-6 hover:bg-blue-500→ 编译后只剩p-6 bg-blue-500，md:和hover:被丢弃 - Vue 的
<style scoped></style>或 Svelte 的<style></style>中的@apply几乎一定失效，因为 JIT 扫描不到这些作用域内字符串 - 替代方案：直接用原生嵌套语法，例如
.btn { @apply py-2 px-4; &:hover { @apply bg-blue-600; } }（注意：这要求你的构建链支持 CSS Nesting）
text-4xl、rounded-full 这些基础类为什么有时不生效？
它们不是“坏了”，而是根本没进最终 CSS 文件。v4 的 content 扫描比 v3 更激进：没出现在扫描路径里的文件，里面写的任何类名都会被跳过。
- 常见漏配：
content: ["./src/**/*.{js,jsx,ts,tsx}"]却把组件放在./pages/或./app/下（如 Astro、Next.js App Router 项目） - Vite 用户容易误信“自动扫描”，但若用了动态拼接类名（
className={base + ' ' + variant}），或 MDX 中的 JSX 字符串，仍需显式列进content - 路径字符串必须用双引号包裹，且 glob 语法要合法：
"./src/**/*.vue"✅，./src/**/*.vue❌（无引号会被 shell 解析失败）
插件类（如 peer-checked:、group-hover:）为何报错或无效？
v4 的插件系统重写，所有插件必须通过 @plugin 在 CSS 文件中导入，且版本必须对齐 v4（如 @tailwindcss/forms@4.x）。旧版 plugins: [require('@tailwindcss/forms')] 在 tailwind.config.js 里完全被忽略。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
@headlessui/react，它的data-[open]变体依赖@tailwindcss/typography或自定义插件，不手动@plugin "@tailwindcss/typography"就不会生成对应工具类 -
@plugin必须写在@import "tailwindcss"之后、@theme之前，顺序错会导致插件拿不到基础层 - npm 升级了
tailwindcss@4却没升级插件，@plugin "@tailwindcss/forms"会直接报 “plugin not found”
dark:bg-gray-800 失效，你查 DOM 看不到对应样式规则，翻控制台也没有 warning——得从 content 路径、@custom-variant 声明、插件导入顺序三处挨个确认。 
