Arbitrary values生效需同时满足四条件：语法正确、JIT扫描覆盖、属性支持、格式合规；漏任一环即静默失效，如text-[#1e3a8a]无颜色最常见原因是content路径未包含该文件。
Arbitrary values 不是“写对了就能用”，而是“写对了 + JIT 扫描到 + 属性支持 + 格式合规”四者同时满足才生效。漏掉任一环，Tailwind 都会静默跳过，不报错、不警告、不生成 CSS。
为什么写了 text-[#1e3a8a] 却没颜色？
最常被忽略的是 JIT 扫描路径未覆盖该文件。哪怕语法完全正确，只要 tailwind.config.js 的 content 数组没包含你写这个类的模板或组件文件（比如 src/pages/Home.tsx），构建时就不会生成对应规则。
- 检查
content是否用了通配符覆盖真实路径：例如./src/**/*.{ts,tsx,jsx,js}，而不是只写./index.html - 确认项目用的是 Tailwind v3.0+（v2.x 完全不支持任意值）
- 避免在动态拼接中引入非法字符：Vue 模板里
:class="`text-[${color}]`"中若color是undefined，结果变成text-[undefined]，直接失效 - 不要加空格或引号：
text-[ #1e3a8a ]或text-['#1e3a8a']都会被忽略
哪些属性能用 [value]，哪些不能？
不是所有带连字符的前缀都支持任意值。Tailwind 默认只对部分工具类开放解析，比如 text-、bg-、px-、grid-cols-、shadow-；但 animate-、transition-、ease- 这类依赖预设值的前缀，animate-[bounce_1s] 一定无效。
- 查证方式：翻官方文档对应工具类页的 “Arbitrary values” 小节，或看
tailwind.config.js中theme.*是否已定义该前缀的扩展能力 -
top-、left-等定位类在 v3.2+ 默认支持，v3.0 需手动在theme.extend.spacing中添加百分比或像素值 -
leading-（line-height）默认不支持任意值，除非你显式配置theme.extend.leading -
font-支持任意值的前提是theme.fontFamily已启用扩展
方括号里怎么写才不被 JIT 静默丢弃？
Tailwind 的 JIT 引擎会对括号内内容做白名单过滤，含双斜杠、未编码括号、CSS 变量（如 text-[var(--my-color)]）、或非法空格的字符串，都会被跳过。
- 空格必须替换成下划线：
text-[0_1px_2px_rgba(0,0,0,0.3)]✅，text-[0 1px 2px rgba(0,0,0,0.3)]❌ - 括号不用转义，但嵌套括号要小心：
shadow-[0_0_10px_rgba(0,0,0,0.2)]✅，shadow-[0_0_10px_rgba(0,0,0,0.2))]❌（多了一个右括号） - URL 路径中的斜杠不用处理，但双斜杠（
//）会被拦截：bg-[url('/img/hero.jpg')]✅，bg-[url('https://example.com/img.jpg')]❌ - 函数如
calc()必须完整包裹：w-[calc(100%-2rem)]✅，w-[calc(100% - 2rem)]❌（空格）
响应式 + 任意值组合为什么经常失效？
md:top-[10%] 这种写法本身没问题，但它的生效依赖两个硬条件：父元素必须有定位上下文（relative / absolute），且子元素自身得是 absolute 或 fixed —— 否则浏览器直接忽略 top 声明。
- 类名顺序很重要：先写
absolute，再写md:top-[10%]，最后写md:-translate-y-[50%] - 百分比单位在旧版中可能被禁用，建议优先用无单位写法：
-translate-y-[0.5]（Tailwind 自动补em）或-translate-y-1/2（更可靠） -
md:top-[10%]和md:left-[50%]必须成对出现，否则水平偏移会错乱 - 小屏 fallback 不能省：
top-0 left-1/2 -translate-x-1/2这类预定义类必须存在，否则响应式断层
真正难的不是怎么写 [value]，而是判断它是不是当前问题的**唯一合理解法**——如果值是固定的、可枚举的、复用频繁的，就该进 theme.extend；如果只是临时调试，用开发者工具改 inline style 更快；只有当值来自用户输入、API 返回、或 CMS 字段且无法穷举时，[value] 才值得动用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
