Arbitrary Values是Tailwind中通过方括号语法（如bg-[#1e40af]）嵌入原生CSS值的机制，仅在JIT引擎启用时生效，须严格遵循无空格、显式单位等规则，适用于设计系统未覆盖的快速定制场景，但不可替代主题配置或滥用为CSS-in-JS。
Arbitrary Values 是什么，什么时候该用
Arbitrary Values 不是“写任意 CSS”，而是 Tailwind 提供的一种语法糖，允许你在类名里嵌入原生 CSS 值，让 bg-[#1e40af]、text-[2.5rem] 这类写法生效。它只在启用 JIT（Just-in-Time）引擎的版本中可用（v3.0+ 默认开启），且必须满足：值被方括号包裹、不含空格、不带单位缩写（如 px 必须显式写出）。常见于快速原型、设计系统未覆盖的颜色/尺寸/阴影等场景，但别把它当 CSS-in-JS 用——过度使用会破坏原子类语义，也绕过 PurgeCSS 的安全清理逻辑。
哪些类支持 Arbitrary Values，哪些不支持
不是所有工具类都支持。支持的通常是值型属性（颜色、尺寸、间距、圆角、阴影、透明度等），比如 bg-[*]、text-[*]、px-[*]、rounded-[*]、shadow-[*]；不支持的是复合行为类，例如 flex、grid、hover: 伪类修饰器本身不能套 arbitrary（hover:bg-[#f00] 可以，但 hover:[display:flex] 不行）。另外，像 font-size 这类需配合单位的属性，必须写全：text-[16px] 合法，text-[16] 无效；而 bg-[#000] 和 bg-[rgb(0,0,0)] 都合法，但 bg-[black] 就走的是预设色表，不算 arbitrary。
怎么写才不会被 PurgeCSS 删除或编译失败
Tailwind 默认会移除未在源码中显式出现的类名。Arbitrary Values 属于动态生成，必须确保它们出现在你的模板、JSX 或 CSS 文件中（即字符串字面量），否则构建时会被清掉。PurgeCSS 不解析 JS 表达式或变量拼接，所以 className={`text-[${size}px]`} 这种运行时拼接无效。正确做法是：
- 直接写死：
class="text-[1.875rem] md:text-[2.25rem] bg-[#1d4ed8]" - 若需复用，抽成
@layer utilities自定义类，而非靠 arbitrary 撑场面 - 避免在
@apply中嵌套 arbitrary（@apply bg-[#fff];会报错，Tailwind 不支持） - 注意引号：HTML 中用双引号或单引号均可，但 JSX 里若外层用双引号，内部 arbitrary 的方括号需转义或改用单引号：
className='bg-[#3b82f6]'
常见错误和调试技巧
最常遇到的是编译无报错但样式不生效，原因多为语法或配置问题：
立即学习“前端免费学习笔记（深入）”；
-
text-[2em]→ 有效；text-[2 em]→ 失效（空格不允许） -
shadow-[0_2px_4px_rgba(0,0,0,0.1)]→ 有效；shadow-[0 2px 4px rgba(0,0,0,0.1)]→ 失效（空格未编码） - 升级到 v3.4+ 后，
aspect-[4/3]支持了，但旧版不认，得查文档对应版本 - 调试时打开浏览器开发者工具，检查元素是否真渲染出对应内联 style，如果没生成，大概率是 Purge 清掉了，或语法有隐藏字符（比如中文括号、不可见 Unicode）
Arbitrary Values 是应急补丁，不是替代设计系统的方案。真正需要高频定制的值，应该加进 theme.extend 或 @layer，而不是靠方括号堆出来。
