应优先使用 [&]: 替代 !，因其特异性精准提升且不破坏变体链；配合 @layer 控制加载顺序，仅在无法调整源码且时间紧迫时才启用 important: true。
为什么直接加 ! 很快就失控
加 p-4! 确实能立刻让 padding 生效，但问题不在“能不能用”，而在“用了之后怎么收场”。一旦在多个地方写 text-red-500!、bg-blue-600!、flex!，后续想微调某个状态（比如 hover:text-red-600!）就会发现：它被前面那个 text-red-500! 死死压住，除非你也给 hover 版本加 !——然后形成 !text-red-500 → !hover:text-red-600 的连锁反应。
-
!不是局部开关，它是全局权重放大器，会污染整个类的变体链 - 浏览器 DevTools 里看到一堆
.p-4\!、.text-red-500\!，说明你已经在靠暴力维持样式秩序 - 它掩盖了真正的问题：为什么这个样式本该赢，却输了？是 preflight 重置了
button？还是第三方组件用了内联style？
[&]: 比 ! 更轻、更准、更可维护
当 w-full 覆盖了你想设的 w-[200px]，别急着写 w-[200px]!。用 [&]:w-[200px]，生成的 CSS 是 .w-full [&]:w-[200px]，特异性从 0,1,0 升到 0,2,0，刚好赢过同级工具类，又不干扰其他规则。
- 支持响应式：
[&]:md:w-[240px]合法且生效，md:!w-[240px]是非法写法 - 兼容状态变体：
[&]:hover:bg-gray-100可以精准作用于当前元素，不波及子元素 - 不会破坏 Tailwind 的值映射逻辑，
[&]:p-4仍走配置里的 spacing scale - 适合封装进自定义类：
@apply [&]:w-[200px] [&]:hover:bg-gray-100
用 @layer 控制加载顺序，而不是靠 ! 强行翻盘
Tailwind 默认把所有工具类塞进 utilities 层，但如果你自己写的 .card-header 样式也混在里面，它大概率会被后面生成的 text-lg 或 font-bold 覆盖——因为 CSS 声明顺序决定胜负，而 Tailwind 的 utilities 总是最后输出。
- 把业务组件样式放进
@layer components，它天然比utilities层优先级高 - 确保
@tailwind base在 CSS 入口第一行，@layer base紧随其后，否则自定义h1会被 preflight 重置覆盖 - 第三方 UI 库样式无法控制？用
ponytail插件把它声明为@layer third-party，再手动排定层级顺序：third-party - 手写裸 CSS（如
.title { color: #1e40af; }）默认落在未声明层，会被@layer utilities压制；必须显式放进某一层才可控
真正该开 important: true 的时候极少
它不是“解决冲突”的常规手段，而是“已知对手是谁+无法调整加载顺序+时间紧迫”的兜底策略。比如集成一个富文本编辑器，它的内联 style="color: red" 和你的 text-blue-500 死磕，又不能改编辑器源码，这时开 important: true 才算合理。
立即学习“前端免费学习笔记（深入）”；
- 开之前先确认：是不是 preflight 在作祟？检查 DevTools 里
button规则是否带data-tailwind="true" - 优先选
important: '#app'，只影响根容器内，不影响弹窗、Tooltip 等浮动内容 -
important: true必须是布尔值，写成important: "true"或important: "#app"以外的字符串都无效 - 开了之后，
!text-sm这种写法会失效，因为text-sm已经带了!，再加一个变成语法错误
最常被忽略的点：! 解决不了 preflight 对原生标签的重置。按钮变透明、输入框边框消失，根源是 button { background-color: transparent } 这条规则，它不依赖类名，加再多 ! 都没用——得关 corePlugins.preflight 或用 important: '#app' 局部锁定作用域。
