Arbitrary values 是 Tailwind 提供的「逃逸机制」，允许在类名中用方括号直接嵌入单个合法 CSS 值（如 bg-[#1e293b]、top-[73.5px]），仅适用于临时、一次性、无法枚举的样式需求，需满足 JIT 模式开启、值无空格、单位显式、不用于 @apply 或伪类嵌套等限制。
Arbitrary values 是什么，什么时候该用
Arbitrary values 是 Tailwind 提供的「逃逸机制」，让你在 class 名里直接写 CSS 值，绕过预设的 theme 配置。它不是万能补丁，只适合临时、一次性、无法提前归类的样式需求——比如某个组件需要 top: 73.5px，而你又不想为此在 theme.spacing 里加一条新值。
语法格式和合法写法
基本形式是方括号包裹任意合法 CSS 值：top-[73.5px]、bg-[#1e293b]、shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]。注意几点：
- 方括号内必须是**单个 CSS 值**，不能带属性名（
top-[top:73.5px]❌） - 空格要 URL 编码或用下划线替代（
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]✅，shadow-[0 4px 6px -1px rgba(0,0,0,0.1)]❌） - 颜色支持十六进制、rgb(a)、hsl(a)，但不解析变量（
bg-[var(--my-color)]会原样输出，浏览器可能不认） - 单位必须显式写出（
mt-[2.5]❌，mt-[2.5rem]✅）
哪些场景容易踩坑
Arbitrary values 看似自由，但实际受限于 Tailwind 的编译逻辑和浏览器兼容性：
-
@apply中不能用 arbitrary values（@apply bg-[#1e293b]❌），会报错或静默失败 - 伪类组合时需完整写出（
hover:shadow-[...]✅，但hover:[&_span]:text-red-500❌——这种嵌套选择器不被支持） - 响应式前缀必须放在最前（
md:top-[73.5px]✅，top-md:[73.5px]❌） - 过度使用会导致 PurgeCSS 误删（确保
content配置覆盖所有含[...]的模板文件路径）
比 arbitrary values 更稳的替代方案
如果发现你在多个地方重复写 bg-[#1e293b] 或 shadow-[...]，说明它其实属于项目约定，该进 theme：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的theme.extend.colors里加自定义色名 - 用
theme.extend.boxShadow定义可复用的阴影 token - 对复杂动画/过渡，宁可用
@layer utilities手写 class，也别堆 arbitrary values
真正难搞的永远不是怎么写进 HTML，而是怎么让别人读懂、维护、不意外失效——arbitrary values 是螺丝刀，不是建筑蓝图。
