Arbitrary Values是Tailwind中用方括号语法（如bg-[#1da1f2]）插入任意合法CSS值的机制，适用于预设类不足、临时微调或快速验证场景，但非万能补丁，重复使用应转为自定义主题或工具类。
Arbitrary Values 是什么，什么时候该用它
Tailwind 的 Arbitrary Values（任意值）是用方括号包裹的内联 CSS 值写法，比如 bg-[#1da1f2] 或 top-[13.7px]。它不是“万能补丁”，而是当预设类名不够用、又不想脱离 Utility-First 流程时的折中方案。
它适合这些场景：
- 颜色值来自设计稿但未定义在
theme.extend.colors中 - 某个组件需要微调间距/尺寸，但只出现一次，不值得新增自定义类
- 快速验证某个数值效果（比如调试
z-index或opacity）
别把它当成 CSS-in-JS 替代品——重复使用相同 arbitrary 值（如多个 shadow-[0_4px_12px_rgba(0,0,0,0.15)]）说明该抽成自定义工具类或 theme 扩展。
怎么写才不会被 PurgeCSS 清掉
PurgeCSS（或默认的 Tailwind JIT）默认只保留你代码中实际出现的类名。Arbitrary Values 是动态生成的，必须显式启用支持：
立即学习“前端免费学习笔记（深入）”；
- 确保你用的是 Tailwind v3.0+（v2 不支持）
- 在
tailwind.config.js中确认content路径包含所有模板/JSX 文件（否则连带的 arbitrary 类根本不会被扫描） - 不需要额外配置即可识别
[...]语法，但注意：单引号或双引号不能出现在括号内，否则解析失败
常见错误：
-
text-['#ff6b6b']❌ —— 引号会被当作值的一部分，Tailwind 尝试解析为 CSS 自定义属性，最终无效 -
text-[#ff6b6b]✅ —— 直接写，不加引号 -
bg-[url('/img/hero.jpg')]✅ —— 路径里有斜杠，但不用引号；URL 内部的单引号（如url("data:image/svg...")）需转义或避免
哪些 CSS 属性支持 Arbitrary Values，哪些不支持
支持的属性取决于 Tailwind 的底层插件是否启用了「arbitrary value」支持。主流核心功能基本都支持，例如：
-
text-[1.875rem]（font-size） -
border-[3px<em>solid</em>#e2e8f0]（border，空格分隔多值） -
grid-cols-[repeat(7,_minmax(0,_1fr))]（grid-template-columns，括号需编码或用下划线代替空格） -
shadow-[0_4px<em>6px</em>-1px_rgba(0,0,0,0.1)]（box-shadow，函数内逗号和括号可直接写）
不支持的情况：
-
transform-[translateX(50%)]❌ ——transform类本身不接受 arbitrary 值（Tailwind 提供translate-x-1/2等替代） -
animate-[spin_1.5s_linear_infinite]❌ ——@keyframes名必须预定义，arbitrary 不会自动注册动画帧 -
aspect-[4/3]❌ ——aspect-ratio的 arbitrary 值在 v3.3+ 才支持，旧版会忽略
性能提示：过度使用复杂 arbitrary 值（如嵌套函数、长 gradient）会导致生成的 CSS 体积膨胀，且无法复用。
遇到「class not generated」或浏览器里没生效怎么办
这是最常卡住人的地方，排查顺序如下：
- 检查浏览器开发者工具中该元素是否有对应 class，若完全没渲染出来，大概率是 PurgeCSS 没扫到——确认
content配置路径正确，且文件后缀在默认匹配列表中（如.tsx需显式加入） - 查看构建日志是否报
Cannot resolve arbitrary value，通常是因为括号不匹配或用了非法字符（如[rgb(255,0,0)]缺少函数名） - 在 class 名上右键「Break on > attribute modification」，看是否被 JS 动态移除或覆盖
- 尝试简化值：把
bg-[linear-gradient(135deg,#f00,#00f)]拆成bg-[#f00]测试基础 arbitrary 是否工作
一个可靠验证方式：在任意 JSX/HTML 文件里硬写一行 <div class="text-[#b91c1c]">test</div>，看能否生效。如果可以，问题出在你的变量拼接或条件渲染逻辑里（比如 className={<code>text-[${color}]} 中 color 含引号或空格）。
Tailwind 对 arbitrary 值的解析很严格，容错低——它不是字符串模板，而是按 CSS 语法树做静态分析。写错一个括号或空格，整个类就静默失效。
