Tailwind中shadow-[]必须用英文逗号分隔多重阴影，因CSS规范要求box-shadow多值以逗号连接，空格或换行会导致JIT引擎解析为非法单值而失效；括号内空格不被清洗，下划线替代空格且逗号不可省略。
shadow-[] 里写多个 box-shadow 为什么必须用逗号分隔，不能换行或空格？
因为 shadow-[] 接收的是一个完整的 CSS box-shadow 属性值字符串，而 CSS 规范要求多个阴影之间用英文逗号 , 分隔，空格或换行会被解析为语法错误或截断。Tailwind JIT 引擎按字面解析方括号内的内容，不会做额外格式清洗。
常见错误现象：shadow-[inset_0_0_0_1px_red inset_0_0_0_2px_blue] 看似合理，但中间是空格——这会被当作单个非法阴影值，最终无样式生效；DevTools 里查不到对应规则，也不报错。
-
shadow-[inset_0_0_0_1px_red,inset_0_0_0_2px_blue]✅ 正确：逗号分隔，下划线替代空格 -
shadow-[inset 0 0 0 1px red, inset 0 0 0 2px blue]❌ 失效：括号内含空格（JIT 不识别） -
shadow-[inset_0_0_0_1px_var(--primary-500),inset_0_0_0_2px_red]✅ 支持 CSS 变量，注意下划线与逗号位置
哪些工具类支持方括号任意值，哪些不支持？
不是所有前缀都开放任意值能力。Tailwind 明确只对部分工具类前缀启用 JIT 方括号解析，比如 bg-、text-、mt-、w-、grid-cols-、duration-、shadow- —— 这些是安全的。
但像 rounded-、border-、place-items- 这类多级预设类，rounded-[8px] 或 border-[2px] 均无效。它们不进 JIT 解析管道，也不会生成对应 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
- 支持的：
bg-[url('/img.png')]、text-[#333]、shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] - 不支持的：
rounded-[12px]（得用[border-radius:12px]）、border-[2px_solid_#ccc]（得用[border:2px_solid_#ccc]） - 配置类如
transition-本身不支持任意值，但duration-[300ms]是合法的
bg-[linear-gradient(...)] 里斜杠、括号、引号怎么处理？
URL 编码不是必须，但路径和特殊字符必须合规。新版 JIT（2026 年主流版本）已支持直接写 bg-[url('/assets/pattern.svg')]，但内联 SVG 仍需编码：尖括号 → <code>%3C，# → %23，否则浏览器解析失败，Network 标签页会显示 404 或 MIME 错误。
渐变函数里的括号和逗号不用编码，但空格必须保留且不能被下划线替代——这是和 shadow- 的关键区别：
-
bg-[linear-gradient(45deg,#000_0px,#000_1px,transparent_1px,transparent_2px)]✅ 括号内空格保留 -
bg-[radial-gradient(circle_at_50%_50%,#000_1px,transparent_1px)]❌circle_at_50%_50%错误：应为circle_at_50%_50%？不对，正确是circle_at_50%_50%→ 实际要写成circle_at_50%_50%？等等，查实：必须写circle_at_50%_50%，即下划线替代空格，但circle_at是固定关键字，不能拆；最终应为bg-[radial-gradient(circle_at_50%_50%,#000_1px,transparent_1px)]✅ -
bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20r%3D%221%22%20fill%3D%22%23000%22/%3E%3C/svg%3E')]✅ 内联 SVG 必须完整编码
方括号语法写错一个字符，为什么 DevTools 里完全找不到对应样式？
因为 JIT 引擎在构建阶段就跳过非法任意值，既不报错也不生成 CSS 规则。它只认严格匹配的模式：前缀紧贴左括号、括号内无首尾空格、单位显式写出、特殊字符合规。
最容易被忽略的点是空格——mt-[ 16px ] 和 mt-[16px ] 全部失效；还有颜色缩写漏掉透明度通道，比如 bg-[rgb(0,0,0)] 在部分旧版构建中可能被忽略，应写 bg-[rgba(0,0,0,1)] 更稳妥。
- ✅ 正确：
h-[calc(100vh-64px)]、bg-[#f0f0f0]、shadow-[0_2px_4px_rgba(0,0,0,0.1)] - ❌ 静默失效：
h-[calc(100vh - 64px)]（calc 内空格）、bg-[#f0f]（非标准缩写）、shadow-[inset 0 0 0 1px red]（空格未转下划线）
