确认选择器权重不足，需打开浏览器开发者工具选中元素，在Styles面板查看被划掉样式右侧的specificity值（如0,1,1,0），并与覆盖规则的权重对比；ID算100、类/伪类/属性算10、元素算1、行内样式为1000。
直接看开发者工具里被划掉的那条规则右边显示的 specificity 值，对比覆盖它的规则——不是“没写对”，而是“被压住了”。
怎么确认是选择器权重不够？
打开浏览器开发者工具，选中目标元素，在 Styles 面板里找你写的那条样式（比如 text-blue-500 或 .btn-primary）。如果它被横线划掉，鼠标悬停会提示 “specificity is lower than another rule”。点开这条被划掉的规则，右侧会显示类似 0,1,1,0 的权重值。再点开覆盖它的那条规则，看它的权重是否更高。
- ID 选择器（如
#header）算 100，类/伪类/属性选择器（如.btn、:hover、[disabled]）各算 10 - 元素选择器（如
div、p）各算 1 - 行内样式（
style="color: blue"）权重是 1000，几乎无法被外部 CSS 覆盖 - 嵌套本身不加权，但
.modal .header .title span累计了 3 个类 + 1 个元素 =0,3,0,1（即 31），很容易压过你后来写的.title（仅 10）
Tailwind 类名和自定义选择器混用时谁赢？
Tailwind 生成的类默认权重都是 10（一个类选择器），但框架组件内部可能用了更重的选择器，比如 .ant-btn.ant-btn-primary:hover 是 20，而你只写了 .btn-primary，hover 状态下就会回退。
- Ant Design、Element Plus 等 UI 库的 CSS 文件通常后引入，同权重下天然胜出
- 如果你在
tailwind.config.js里启用了important: true，生成的类会带!important，权重翻倍；但别滥用，否则后续维护容易陷入“谁加得更多谁赢” - 用子选择器替代后代选择器更可控：比如
.card > .title比.card .title更精准，也更容易预测覆盖关系
为什么改了 class 名还是不生效？
常见假象：你以为改的是样式，其实改的是“没被扫描到的字符串”。Tailwind 不是运行时解析 class，而是在构建阶段静态扫描源码里的字面量类名。
立即学习“前端免费学习笔记（深入）”；
-
content字段没覆盖到当前文件？检查tailwind.config.js是否包含"./src/**/*.{js,jsx,ts,tsx}"，改完必须重启 dev server - 动态拼接类名如
class="text-${size}-500"不会被扫描，需进safelist显式声明，正则要写成/text-[a-z]+-500/，不是字符串'/text-[a-z]+-500/' - 拼写错误：写成
text-lgg、text_lg或textLg，浏览器根本找不到对应规则
真正卡住人的地方往往不是“不会写”，而是“以为生效了，其实连 CSS 规则都没生成”。先查 Network 面板里最终输出的 CSS 文件里有没有那条规则，再查 Styles 面板里有没有被划掉——两步缺一不可。
