多重阴影必须用英文逗号分隔，如shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),_0_4px_12px_rgba(0,0,0,0.15)]，空格或下划线替代空格均不可替代逗号，否则jit引擎解析失败。
shadow-[] 写多重阴影必须用英文逗号分隔
写 shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)_0_4px_12px_rgba(0,0,0,0.15)] 看似合理，但中间是下划线或空格——Tailwind JIT 会把它当作单个非法值丢弃，最终无样式生效。CSS 规范要求多个 box-shadow 值之间必须用英文逗号分隔，JIT 引擎不会帮你清洗格式。
正确写法是：shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),_0_4px_12px_rgba(0,0,0,0.15)]（注意逗号后加下划线或空格）。
- 逗号必须是英文半角，不能是中文逗号或省略
- 括号内所有空格必须转为下划线，比如
rgba(0,0,0,0.1)不能写成rgba(0, 0, 0, 0.1) - 含
inset或模糊半径 >40px 时，Safari 15.4 以下会静默丢弃整条声明，不是 bug，是解析器限制 - 支持 CSS 变量：
shadow-[inset_0_1px_2px_var(--shadow-color),_0_2px_4px_var(--shadow-faint)]
grid-cols-[] 必须用引号包裹含空格的值
grid-cols-[1fr_2fr_1fr] 能生效，但 grid-cols-[1fr_2fr_auto] 或 grid-cols-[minmax(0,_1fr)_minmax(0,_2fr)] 会失败——因为 JIT 解析器在第一个空格处就截断了，后续内容被忽略。
唯一可靠写法是加双引号：grid-cols-["1fr_2fr_auto"] 或 grid-cols-["minmax(0,_1fr)_minmax(0,_2fr)"]。
- 引号必须是双引号，单引号如
grid-cols-['1fr_2fr']会被当作字符串字面量，生成无效 CSS - 下划线替代空格是必须的，
grid-cols-["1fr 2fr"]中的空格不会被自动转换 - 这种写法仅适用于动态列配置；固定模式建议直接在
tailwind.config.js的theme.extend.gridTemplateColumns中定义键名
bg-[url(...)] 路径和特殊字符要合规
bg-[url('/img/hero.jpg')] 在新版 JIT（2026 主流版本）中可直接工作，但内联 SVG 或含斜杠、井号的路径仍可能触发 404 或 MIME 错误——浏览器解析 URL 失败，Network 面板显示资源加载异常。
安全做法是：路径中含 /、#、 等字符时做 URL 编码：<code>bg-[url('%2Fassets%2Fpattern.svg')]。
- 尖括号必须编码为
%3C和%3E，否则 HTML 解析器提前闭合标签 - 不推荐用
bg-[url("data:image/svg+xml;utf8,<svg>...")]</svg>，部分旧版 WebView 不支持 utf8 data URL -
linear-gradient()可直接写：bg-[linear-gradient(135deg,#3b82f6,#8b5cf6)]，无需编码，但括号内不能有空格
哪些前缀根本不能套 [value]
不是所有类名前缀都支持方括号语法。rounded-[12px]、border-[2px]、place-items-[center] 全部无效——它们不走 JIT 的 arbitrary value 解析管道，也不会生成对应 CSS 规则。
真正支持的前缀有限，且官方未全量开放。最稳妥的判断方式是查文档对应工具类页的 “Arbitrary values” 小节，或确认该前缀是否在 tailwind.config.js 的 theme.* 中有扩展能力声明。
- 安全可用：
bg-、text-、mt-、w-、grid-cols-、duration-、shadow- - 明确不支持：
rounded-、border-、animate-、transition-、ease- - 有条件支持：
scale-（需带单位：scale-[1.25]✅，scale-[125%]❌）、rotate-（rotate-[15deg]✅，rotate-[15]❌）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
