class属性拼写错误导致任意值类名全失效，因浏览器忽略非标准属性名；content路径未覆盖、方括号语法错误、jit关闭或前缀不支持任意值亦会导致失效。
class 属性名拼写错误导致任意值类名全失效
浏览器根本不会解析 clas、className、classes 这类非标准属性名，整个 class 属性被忽略——bg-[#1e3a8a]、mt-[23px] 全部不参与样式计算。这不是 Tailwind 的 bug，是 HTML 基础规则。
打开开发者工具 Elements 面板，直接看目标元素有没有 class 属性。没有？立刻检查拼写。React 中 className 是 JSX 属性名，但最终必须输出为 class；原生 JS 创建元素时必须用 element.className = "..."，不能写 element.classList = "..."。
content 路径未覆盖源文件，JIT 根本看不到任意值
Tailwind 不运行时解析，只在构建时扫描 content 配置里声明的路径下的**字面量字符串**。如果 text-[#333] 写在 App.tsx 里，但 content 只写了 ["./src/*.js"]，那它就永远不会进 CSS 文件。
-
content: ["./**.{html,js}"]缺引号，Node 环境可能解析失败 -
content: ["'./src/**/*.{js,jsx}'"]多了一层单引号，路径无效 - Vite/Next.js 项目漏掉
./public/index.html或.tsx后缀，JSX 里的任意值类名直接丢失
检查构建后的 CSS 文件（如 dist/assets/index.xxxxx.css），搜索 .text-\[#333\]。没找到？就是 content 漏了。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
方括号语法写错，JIT 静默跳过
[value] 看似简单，但空格、连字符、引号一个不对，解析器就在第一个非法字符处截断，不报错也不生成规则。
-
text-[ #333 ]→ 开头/结尾有空格，整个被忽略 -
grid-cols-[1fr 2fr 1fr]→ 空格未转下划线，应写成grid-cols-[1fr_2fr_1fr] -
shadow-[inset 0 0 0 1px red]→ 括号内含空格，必须写成shadow-[inset_0_0_0_1px_red]或加引号shadow-["inset 0 0 0 1px red"] -
bg-[url('/img.png')]→ 路径含括号或尖括号时需 URL 编码，否则 Network 面板会 404
JIT 关闭或前缀不支持任意值
不是所有前缀都走 JIT 任意值管道：rounded-[12px]、border-[2px]、animate-[bounce] 全部无效，它们依赖预设值匹配逻辑；只有 duration-[300ms]、shadow-[]、text-[#333] 这类明确标注支持 “Arbitrary values” 的才有效。
确认 tailwind.config.js 没手动设 mode: 'aot'（v2/v3 中关闭 JIT）；查官方文档对应工具类页的 “Arbitrary values” 小节，或翻 theme.extend 是否定义了该前缀——比猜更可靠。
任意值类名的编译失败，几乎从不发生在运行时，而是在构建阶段就被静默跳过。关键要确认：浏览器是否真收到了 class 属性、JIT 是否真扫描到了那个字符串、方括号里的内容是否符合解析器的字面量要求。漏掉其中任一环，结果都是空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
