当在 tailwind 中同时使用基础工具类（如 `w-full`）和任意值类（如 `w-[80px]`）时，由于两者生成的选择器特异性相同（均为 `.w-full`, `.w-\[80px\]`），后声明的类不一定会生效——css 层叠规则导致先出现的类可能被后出现的同级类覆盖，实际表现为 `w-[80px]` 未生效。
这个问题的根本原因在于：Tailwind v3+ 为所有工具类（包括任意值类）生成的 CSS 规则具有完全相同的特异性（specificity）。例如：
.w-full { width: 100%; }
.w-\[80px\] { width: 80px; }二者均为单个类选择器（specificity = 0,1,0），因此最终生效的样式取决于它们在 CSS 文件中的声明顺序，而非 HTML 中 class 的书写顺序。而 Tailwind 默认按字母/词典序生成 CSS（w-[80px] 可能排在 w-full 之前），导致 w-full 覆盖了 w-[80px]。
✅ 正确解法：提升任意值类的选择器特异性，使其高于基础工具类。推荐使用 & 结合任意变体（arbitrary variant）：
<div className="w-full [&]:w-[80px]">Sample</div>
该写法编译后生成类似如下高特异性 CSS：
立即学习“前端免费学习笔记（深入）”；
.w-full { width: 100%; }
.w-full\[&\]\:w-\[80px\] { width: 80px; } /* specificity = 0,2,0 */由于 & 表示父选择器（此处即 .w-full），[&]:w-[80px] 实际生成的是 .w-full.w-\[80px\] 或更精确的 .w-full\:w-\[80px\]（取决于配置），其特异性为 0,2,0，明确高于 0,1,0，从而确保 80px 生效。
⚠️ 注意事项：
- 不要依赖 !important（破坏 Tailwind 设计哲学，且可能引发维护难题）；
- 避免滥用 group-* / peer-* 等语义化变体替代 &，除非已有对应父容器结构；
- 若需全局强制覆盖，可考虑在 tailwind.config.js 中启用 important: true（但仅建议用于极少数根容器场景）；
- 自定义任意值类时，也可通过 addUtilities + 高特异性选择器手动注册，但上述 & 方案最轻量、标准且无需配置。
总结：Tailwind 的任意值类并非“低优先级”，而是与基础类同级；破局关键在于主动提升选择器特异性——[&]:xxx 是官方推荐、零配置、语义清晰的标准方案。
