tailwind生成的css不生效的根本原因是浏览器未将其作为有效样式解析，关键在于postcss插件顺序错误、@layer与@tailwind指令位置错乱（如@layer base未紧随@tailwind base）、content路径未覆盖源文件导致类名未被扫描，或link标签加载顺序不当使规则被覆盖。
为什么Tailwind生成的CSS在浏览器里不生效？先看解析顺序
Tailwind生成的CSS是否生效，不取决于你写了多少类，而取决于浏览器是否真把它当“有效样式”加载并解析。关键不是写法，是浏览器拿到CSS后怎么处理——它从右往左匹配选择器，所以@layer位置、@tailwind指令顺序、甚至PostCSS插件执行时序，都会影响最终注入到DOM里的规则是否能命中元素。
用DevTools验证CSS是否被真正解析
打开浏览器开发者工具 → Elements面板 → 选中目标元素 → 右侧Styles标签页，重点看三件事：
- 有没有出现你写的类名（比如
flex、text-blue-600），且没被划掉 - 对应声明是否出现在「Computed」里，例如
display: flex是否可见 - 如果没出现，点开「Rules」顶部的「filter」输入框，搜
flex或text-，看是否有同名但被覆盖/未注入的规则
常见现象：类名写了，但display: flex根本没出现在Computed里——说明该规则压根没进浏览器样式表，不是覆盖问题，是构建阶段就丢了。
检查PostCSS链是否把Tailwind规则“截断”了
Tailwind的CSS必须完整走完PostCSS流程才能变成可执行的样式。如果中间插件顺序错，规则可能被跳过或删掉：
-
tailwindcss必须在autoprefixer之前，否则新属性（如gap）可能被误判为不支持而删掉 -
postcss-modules必须在tailwindcss之前，否则作用域化后的类名（如.Button_button__abc123）无法匹配原始flex规则 - 用对象写法配置
postcss.config.js（{ tailwindcss: {}, autoprefixer: {} }）不可靠，Node ≥15后属性顺序不保证，必须改用数组形式
最直接验证方式：运行npm run build，打开dist/assets/*.css文件，搜索.flex或.text-，确认这些类真实存在且没被PurgeCSS误删。
@layer指令顺序错会导致基础样式静默失效
@layer base必须紧接@tailwind base之后，差一行都可能让自定义h1、textarea样式被Tailwind重置规则覆盖：
- 错误写法：
@tailwind base→ 其他CSS →@layer base→@tailwind components - 正确写法：
@tailwind base→@layer base→@tailwind components→@layer components - 如果用了
@import 'tailwindcss/base.css'，要确认它真被加载（Vite + CSS-in-JS场景下容易漏）
这类问题不会报错，但h1 { @apply text-4xl; }会完全没效果——因为Tailwind的* { box-sizing: border-box }等重置规则已经插在你样式前面，把你写的h1定义盖掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
