tailwind css v4尚未发布，你实际使用的是v3.4.10或非官方alpha版本；所谓“失效”源于配置错误、content路径未覆盖、@apply误用、层叠顺序冲突等本地问题，而非v4兼容性问题。
别急着 rollback，Tailwind CSS v4 尚未发布——你实际升级的，大概率是某个非官方 alpha 分支或误传的“v4”包，而真正生效的仍是 v3.4.10。所谓“升级后失效”，本质是配置、工具链或写法与当前真实版本不匹配。
确认你用的到底是不是真 v4
执行 npm list tailwindcss 或检查 node_modules/tailwindcss/package.json：如果 version 字段不是 4.x（而是 3.4.10 或带 -alpha/-canary 后缀），那问题就不在“v4 兼容性”，而在你本地配置被错误修改或混入了实验性插件。
- 所有官方文档、CLI 输出、PostCSS 插件支持都基于 v3.x；所谓 v4 的
@tailwindcss/vite插件目前仅支持 Vite 5–7，且无正式 release - 如果你用的是
npx tailwindcss init -p生成的配置，它默认输出 v3 兼容结构，强行套用“v4 教程”会破坏 JIT 扫描逻辑 - Vite 8 用户若看到
peer vite@"^5.2.0 || ^6 || ^7"报错，说明你装的其实是 v4-alpha + 不兼容插件组合，不是标准升级路径
content 路径没扫到文件，类名直接被 PurgeCSS 删光
Tailwind 不会猜你写了什么类，只按 content 数组里白纸黑字写的 glob 去硬盘上硬匹配。漏一条路径，对应文件里的 text-lg 就永远不会出现在 output.css 里。
- 必须显式列出扩展名：
"./src/**/*.{js,jsx,ts,tsx,vue,html}"，不能简写为"./src/**/*.js"（JSX/TSX 不会被识别） -
public/index.html这种静态模板也要加进content，否则里面写的class="container mx-auto"会被当死代码删 - 用了
defineConfig动态拼接路径？确保最终数组里每个字符串都是合法 glob，且路径分隔符统一用/（Windows 下\会被转义） - 第三方 UI 库（如 DaisyUI）若以源码形式引入（
node_modules/daisyui/src/），其内部类名也得手动加进content
@apply 在响应式或暗色模式下失效，根本原因不是版本，是写法越界
@apply 是 PostCSS 阶段的静态替换，它无法还原嵌套上下文。写 @apply md:p-6 lg:p-8，JIT 引擎只会提取 p-6 p-8，md: 和 lg: 前缀全丢。
- 该规则必须写在被 PostCSS 处理的入口 CSS 文件中（如
src/main.css），不能放在 Vue 的<style scoped></style>或任意新建的.css里 -
@layer components必须严格位于@tailwind base之后、@tailwind utilities之前，顺序错一位就整个块不生效 - 伪类必须带前缀：
hover:bg-blue-600可以，&:hover { @apply bg-blue-600 }不行 - 动态场景（如
size="sm"）别硬塞@layer，改用tailwind-variants，否则维护成本爆炸且类型推导丢失
样式被其他 CSS 覆盖，不是 Tailwind 失效，是层叠顺序错了
Tailwind 的 @tailwind base 重置了部分原生样式，但如果你在它之后又引入了 Element Plus、Ant Design 等组件库的 CSS，它们的规则可能覆盖 Tailwind 的 utilities。
- 检查 HTML 中
<link>或 JS 中import的顺序：@tailwind base→ 自定义 reset / normalize →@tailwind components→ 第三方库 CSS →@tailwind utilities - Vue 项目中，若多个入口挂载（如
#vue-header和#vue-app），确保main.css只被全局 import 一次，避免重复注入导致优先级混乱 - 用 DevTools 的 Styles 面板看目标元素：如果
bg-blue-500规则显示为灰色或带删除线，说明它被移除了（content 没扫到）；如果规则存在但被划掉，则是层叠顺序或 specificity 问题
最常被忽略的点：那些没报错、没警告、却静默失效的细节——比如 content 路径里少了个 v（.vue 写成 .ue），或者 safelist 正则忘了加 ^ 导致匹配到原生 CSS 属性。这类问题不会打断构建，但会让某几个按钮突然变回浏览器默认样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
