方括号语法未被识别是因jit编译器仅接受特定前缀+严格格式的字符串，如mt-[24px]✅，mt- [24px]或mt-[ 24px ]❌；单位须显式写出，rounded-/shadow-等前缀不支持任意值，content路径未覆盖也会导致失效。
[ ] 语法没被识别，不是你写错了类名，而是 Tailwind 的 JIT 编译器压根没把它当有效输入处理——它只认特定前缀 + 合法括号格式的完整字符串，其余一律跳过。
方括号语法必须紧贴前缀、无空格、单位显式
哪怕多一个空格或少一个单位，JIT 就直接忽略：mt-[24px] ✅，mt- [24px] ❌（前缀后带空格），mt-[ 24px ] ❌（括号内有空格），w-[200] ❌（w- 不支持无单位缩写，得写 w-[200px]）。
常见现象：DOM 里 class 属性显示正常，DevTools 的 Styles 面板里却查不到该规则，也不报错——这是最典型的“被忽略”信号。
- 所有单位必须显式写出：
h-[100vh]、gap-[1.5rem] - 斜杠、括号等特殊字符需 URL 编码：
bg-[url('%2Fassets%2Flogo.svg')] -
calc()内部必须保留空格：h-[calc(100vh-64px)]，不能写成h-[calc(100vh-64px)]
不是所有前缀都支持任意值
[ ] 语法只对明确开放的前缀生效。Tailwind 官方文档列出的支持列表是硬性限制，不是“试试看”就能通的。
bg-、text-、mt-、w-、grid-cols-、duration- ✅；rounded-、shadow-、border- ❌——这些前缀没有任意值解析逻辑，rounded-[12px] 永远不会生成 CSS。
想绕开限制？得用原生 CSS：style="border-radius: 12px" 或 class="[border-radius:12px]"（后者依赖 JIT 对 [...] 的通用解析，但不保证跨版本兼容）。
content 路径没扫到含 [ ] 类的文件
即使语法完全正确，如果 tailwind.config.js 的 content 字段没覆盖到写这类名的文件，JIT 就根本不会读那行代码。
典型漏配：
-
["./src/**/*.{js,ts}"]→ 漏掉.tsx和.jsx，React/Vue 组件里的class="w-[320px]"全失效 -
["./src/**/*"]→ 缺扩展名，Tailwind 不识别任何文件 -
["./public/index.html"]没加进content→ HTML 里写的class="p-[16px]"直接被 PurgeCSS 清掉
验证方式：临时在 input.css 里加一行 .debug { color: red }，再在 JSX 中用 className="debug w-[48px]"，跑 npx tailwindcss -i ./src/input.css -o ./dist/test.css --watch -c ./tailwind.config.js，看终端是否输出 w-[48px] 被提取。
任意值类和基础工具类特异性冲突
w-[80px] 和 w-full 生成的选择器特异性相同（都是单类选择器），而 Tailwind 默认按字母序输出 CSS，w-[80px] 可能排在 w-full 前面，结果被覆盖。
这不是编译失败，是层叠顺序问题。现象：类名出现在 DOM 和 CSS 文件里，但样式不生效。
解法只有提升特异性：
- 用
[&]:w-[80px]（生成.w-full.w-\[80px\]，特异性 0,2,0） - 或改用
style={{ width: '80px' }}避开 CSS 层叠
真正难搞的不是语法本身，而是当你把 [ ] 和动态拼接混用时——比如 class="text-${color}-[24px]"，JIT 连 text- 都不会识别，更别说括号了。这种组合永远无效，得拆开处理：固定前缀走 [ ]，变量部分走 safelist 或 style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
