根本原因是Tailwind的@layer utilities默认排在最后，压制未归层的自定义样式；必须用@layer显式声明同级或更高优先级的层级（如@layer components或@layer utilities），并确保@tailwind utilities在自定义@layer之后引入。
为什么Tailwind的text-blue-500总把你写的.title { color: #1e40af; }干掉？
根本原因不是“谁写在后面谁生效”，而是Tailwind默认把所有工具类注入到@layer utilities，而你手写的普通CSS规则默认落在@layer base或未声明层级——CSS层叠顺序按@layer声明顺序执行，不是文件顺序。Tailwind的utilities层默认排在最后，天然压制未归层的自定义样式。
用@layer显式声明层级，让自定义样式获得平等“发言权”
必须把你的覆盖样式放进和Tailwind同级或更高优先级的@layer里，否则永远被压。常见做法是：
- 把重置/基础样式放进
@layer base（如html、body设置） - 把组件级覆盖（比如
.btn）放进@layer components - 把工具类扩展（比如
.text-brand-primary）放进@layer utilities，且要放在@tailwind utilities之前
示例（放在src/styles.css中）：
@layer base {
h1 {
@apply text-2xl font-bold;
}
}
@layer components {
.card {
@apply bg-white rounded-lg shadow p-4;
}
}
@layer utilities {
.text-brand {
@apply text-indigo-700;
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
遇到@apply失效或报错，先检查是否跨层滥用
@apply只能在@layer内部或普通CSS规则中使用，不能在@layer声明语句外直接写，也不能在@layer外嵌套@apply调用未声明的工具类。常见错误：
立即学习“前端免费学习笔记（深入）”；
- 在
@layer utilities外写.my-btn { @apply bg-blue-500; }→ 报错：Cannot use @apply with unknown utility - 在
@layer base里@apply一个只在components层定义的类 → 不生效，因为层内不可见其他层工具类 - 把
@tailwind utilities写在@layer utilities前面 → 你定义的utilities层会被Tailwind覆盖
调试时怎么看实际生成的CSS顺序？
打开浏览器开发者工具的Styles面板，看某元素上最终生效的样式来自哪个CSS文件的哪一行。关键线索是：
- 所有Tailwind工具类都带
data-tailwind="true"属性（开发模式下） - 你写的
@layer components会生成独立的<style></style>块，标签为data-layer="components" - 如果看到自己的类名出现在Tailwind类名下方但没生效，大概率是它被包裹在了
@layer base里，而Tailwind的utilities层排在更后
最稳的调试路径：删掉所有@layer，只留@tailwind指令 → 确认Tailwind本身工作正常 → 再逐层加回@layer并观察顺序变化。
真正卡住的点往往不在语法，而在对@layer声明顺序与CSS层叠规则之间映射关系的理解偏差——它不等价于“写在后面就赢”，而是“声明在后层才赢”。
