<p>Tailwind v3 默认启用 JIT 模式，任意值语法（如 text-[#1e3a8a]、mt-[3.75rem]）无需配置即可使用，但需确保无 mode:'aot'、content 路径正确覆盖模板文件，且仅支持 bg-、text-、mt- 等白名单前缀，rounded-、border- 等不支持。</p>
Arbitrary Values 不需要配置就能用，但得满足 JIT 模式前提
Tailwind v3 的任意值（如 text-[#1e3a8a]、mt-[3.75rem]）是 Just-in-Time 引擎原生支持的特性，**不需要改 tailwind.config.js 就能直接写**。前提是项目已启用 JIT 模式——v3 默认就是 JIT，只要你没手动关掉 mode: 'aot'（几乎没人这么干），就天然可用。
常见误判是看到样式没生效，就去翻配置文件加东西，结果白忙：真正卡住的往往不是配置，而是语法或解析规则。
- 检查
tailwind.config.js里有没有mode: 'aot'—— 有就删掉，JIT 才管任意值 - 确认
content字段扫到了你写任意值的模板文件（比如./src/**/*.{tsx,jsx}），否则 PurgeCSS 会把它当“未使用类”直接剔除 - v3.2+ 才稳定支持
[&]:w-[80px]这类任意变体，低于这个版本会静默失效
哪些值会被 Tailwind 静默忽略？重点看这三类
不是所有括号里的内容都能过 JIT 解析。Tailwind 对任意值做白名单过滤，不合规的字符串直接跳过，不报错也不生成 CSS —— 这是最容易踩坑的地方。
-
含未编码空格或括号：
shadow-[0px_2px_4px_rgba(0,0,0,0.1)]✅（下划线替代空格），但shadow-[0px 2px 4px rgba(0,0,0,0.1)]❌（空格未转义） -
CSS 变量和引号字符串：
text-[var(--primary)]❌（被当字面量，不解析变量），content-["hello world"]❌（空格需下划线或改用content-[attr(data-label)]） -
百分比、em、calc 内容格式不对：
max-w-[50%]在 v3.0+ 默认禁用，要开experimental.optimizeUniversalDefaults；h-[calc(100%-48px)]✅，但h-[calc(100%-48px)]（少空格）在旧版 PostCSS 里会崩
想让 rounded-、border- 也支持任意值？不能硬套 []
rounded-[12px]、border-[2px] 这类写法永远无效 —— Tailwind 明确没给这些前缀开放任意值解析管道。它们走的是预设值匹配逻辑，不是 JIT 的正则提取路径。
立即学习“前端免费学习笔记（深入）”；
真要实现，只有两个务实选择：
- 用 CSS 自定义属性兜底：
rounded-[12px]❌ → 改成[border-radius:12px]✅（这是标准任意 CSS 属性写法，不限前缀） - 在
tailwind.config.js里扩展主题：theme.extend.borderRadius加一个命名值，比如'xl': '12px'，然后用rounded-xl - 避免动态拼接类名：
className={`rounded-[${size}px]`}❌（JIT 无法静态分析，编译时直接丢弃）
特异性冲突时别碰 !important，用 [&]:xxx 提升优先级
当你写 class="w-full w-[80px]"，发现 w-[80px] 生效不了，不是配置问题，是特异性相同（都是单类选择器），而 Tailwind 默认按字母序输出 CSS，w-full 往往排在前面。
解决方式不是加配置，而是改写法：
-
[&]:w-[80px]是官方推荐解法，它生成的选择器类似.w-full\:w-\[80px\]，特异性为 0,2,0，稳压w-full的 0,1,0 - 确保 Tailwind ≥ v3.2，低版本不识别
[&]语法 - 不要用
!w-[80px]—— 它在 JIT 模式下可能被警告或忽略，且违背设计哲学
复杂点在于：这种提升只对当前元素生效，没法跨组件复用；如果大量出现固定尺寸，还是该回归 theme.extend.spacing 做命名化管理——任意值适合临时、一次性、非复用场景。
