确认类名是否生成是首要步骤：若devtools中类名呈灰色带删除线或不显示，则未进入css文件；手动删除class或用getcomputedstyle验证可快速判断。
检查 DevTools 里类名是否真的被加载
类名没生效，第一步不是猜权重，而是确认它有没有进最终 CSS 文件。打开 Elements 面板选中元素，在 Styles 面板里找那个 Tailwind 类名：text-blue-500、bg-gray-100——如果显示为灰色、带删除线，或压根不出现，说明它根本没生成，不是被覆盖，是“不存在”。
快速验证法：
- 在 Elements 面板手动删掉该 class，看样式是否立刻消失；
- 运行
getComputedStyle(document.querySelector('.your-class')).color，返回空字符串或意外值（比如''或'rgb(0, 0, 0)'），基本确认未生成； - 右键类名 → “Show all related rules”，看是否有更高优先级规则（比如带
!important的自定义样式）在干扰。
确认普通 CSS 是否用了更高 specificity 的选择器
Tailwind 单类（如 .text-blue-500）的特异性是 0,1,0,0。如果你写了 .header .title 或 #app .card，特异性就变成 0,1,1,0 或更高，天然压制 Tailwind 工具类。
常见踩坑点：
-
.btn { color: red; }和text-red-500特异性相同（都是0,1,0,0），谁后加载谁赢； -
button { background: transparent; }是 Tailwind preflight 的默认重置，它不靠类名触发，但直接作用于标签，权重虽低（0,0,1,0），却因全局生效+无条件匹配，常把第三方组件库样式“干掉”； - Vue/React 的
<style scoped></style>会自动加属性选择器（如.header[data-v-abc123]），特异性变成0,1,1,0，比纯类名高一级。
查清 CSS 加载顺序和 @layer 层级关系
Tailwind 默认把工具类注入到 @layer utilities，而你手写的普通 CSS 如果没声明 @layer，就会被归入 @layer base 或未命名层——CSS 层叠顺序按 @layer 声明顺序执行，不是文件引入顺序。
所以即使你在 main.css 里最后 import 自定义样式，只要没写 @layer components 或 @layer utilities，它依然排在 Tailwind 的 @layer utilities 前面，被压制。
正确做法：
- 把覆盖逻辑放进
@layer components（如@layer components { .btn-primary { @apply bg-blue-600 text-white; } }）； - 确保
@tailwind utilities在自定义@layer之后引入； - 避免在
main.css中重复或错位@tailwind指令，Vite HMR 下容易导致 CSS 片段分裂、顺序错乱。
别依赖 !important，先关 preflight 或加 prefix
!important 确实能压倒一切，但它会让 DevTools 的 Styles 面板满屏划掉线，Computed 面板看不出真实来源，调试成本陡增。Tailwind 官方只建议在极端集成场景下启用 important: true，日常开发中它是个信号：你还没找准冲突根源。
更可控的解法：
- 关掉 preflight：
corePlugins: { preflight: false }，尤其当你用 Element Plus、Naive UI 等第三方库时，很多“覆盖感”其实来自 Tailwind 对h1、p、button的默认重置； - 加
prefix: 'tw-'到tailwind.config.js，从源头杜绝类名字符串碰撞（tw-text-blue-500和你的.btn彻底不打架）； - 局部锁定
important范围：important: '#app'，不影响弹窗、Tooltip 等浮动内容。
真正容易被忽略的是：Tailwind 工具类之间也有顺序依赖——rounded-md 和 rounded-full 不是“后写的 class 生效”，而是看它们在最终 CSS 文件里的定义位置；一旦构建缓存没清、Vite HMR 没刷新、或者 @tailwind 指令被挪动，这个顺序就乱了，连 class="rounded-full rounded-md" 都可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
