本文详解 tailwind css 中任意值（如 `w-[80px]`）因 css 优先级低于基础工具类（如 `w-full`）而失效的问题，并提供通过任意变体 `&` 强制提升特异性、确保样式生效的可靠方案。
在 Tailwind CSS v3.3.3 及后续版本中，任意值类（如 w-[80px]、bg-[#1e293b]）虽功能强大，但其生成的 CSS 规则默认特异性（specificity）与标准工具类相同（均为 0,1,0）。这意味着当多个同类工具类（如 w-full 和 w-[80px]）同时作用于同一元素时，后声明的类并不一定生效——实际生效的是 CSS 层叠顺序中最后加载的规则，而 Tailwind 的构建顺序可能导致 w-full（来自预设宽度配置）的 CSS 声明位于 w-[80px] 之后，从而覆盖后者。
例如：
Sample
尽管 w-[80px] 在 class 列表中写在后面，但编译后的 CSS 可能为：
.w-full { width: 100%; }
.w-\[80px\] { width: 80px; } /* 但该规则在 CSS 文件中位置靠前 */导致浏览器按源码顺序解析时，w-full 实际覆盖了 w-[80px]。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法：使用任意变体（arbitrary variant）[&]
[&] 是 Tailwind 提供的“自身选择器”变体，它会将后续工具类包裹在 &（即当前元素自身）上下文中，从而提升生成 CSS 规则的特异性（变为 0,2,0），使其稳定胜出：
Sample
编译后生成类似：
.w-full { width: 100%; }
.w-full [&]:w-\[80px\] { width: 80px; } /* 特异性更高：.w-full & → .w-full .w-full */⚠️ 注意：[&] 并非新增嵌套，而是利用 CSS 自引用机制实现特异性跃升，无需额外 wrapper 元素，不破坏 DOM 结构。
? 进阶提示：
- 该技巧适用于所有冲突场景（如 text-red-500 text-[#3b82f6] → 改用 text-red-500 [&]:text-[#3b82f6]）；
- 若需全局提高任意值优先级，可配置 important: true（在 tailwind.config.js 中），但会牺牲灵活性，不推荐作为首选；
- ! 强制前缀（如 !w-[80px]）虽可用，但会禁用响应式变体（如 md:!w-[120px] 不生效），而 [&] 完全兼容响应式（如 [&]:md:w-[120px]）。
总结：当任意值类被基础工具类覆盖时，优先使用 [&]:xxx 模式——它精准、无副作用、保持响应式能力，是 Tailwind 工程化实践中推荐的标准解法。
