Tailwind JIT 模式无法处理小程序中被截断的类名，因宿主环境将 /、.、[] 等字符视作分隔符或非法字符而提前替换或丢弃，导致 JIT 根本收不到原始 class 字符串。
因为 Tailwind 的 JIT 模式只解析合法的 class 字符串，而 HTML 属性值里带空格的类名（如 class="w-1/4 h-1.5"）在小程序或部分运行时环境会被提前截断或转义成多个无效 token，JIT 根本收不到原始字符串 —— 它不是编译失败，是压根没看见。
为什么 w-1/4 在小程序里变成 w-1 4
小程序框架（如微信、支付宝）在解析 class 属性时，会把斜杠 /、小数点 .、方括号 [ 等字符视作分隔符或非法字符，直接替换成空格。这不是 Tailwind 的问题，而是宿主环境对 HTML 属性的预处理行为。
-
w-1/4→ 被切为w-1和4，后者无对应工具类，失效 -
hover:text-xs→ 变成hover text-xs，hover单独成类，不触发伪类逻辑 -
w-[996rpx]→ 变成w-和996rpx，方括号被丢弃，JIT 无法匹配任意值语法
JIT 能否补救这种被截断的类名
不能。JIT 的输入源是源码文件内容（如 .js、.jsx），它依赖 AST 或正则提取完整 class 字符串。一旦类名在运行时被框架破坏（比如写在 WXML 的 class 属性里），JIT 就完全无法感知 —— 它不会监听 DOM 属性变更，也不解析最终渲染的 HTML。
微信小程序 TabBar 图标生成
下载
微信小程序 TabBar 图标生成技能，使用 Python PIL 绘制简约几何图标（未选中灰、选中绿），自动写入 app.json 配置。适用于“生成 tabBar 图标”、“底部菜单栏图标”、“tab 图标”等指令。
- 写在 JSX 中的
className="w-1/4"：JIT 能识别（只要 content 配置正确） - 写在 WXML 中的
class="w-1/4"：JIT 不扫描 WXML 文件，默认忽略 - 动态拼接
className={`w-${width}/4`}：JIT 静态分析失败，不会生成规则
小程序中安全可用的 Tailwind 类名写法
绕过环境限制的唯一办法，是避开所有会被截断的字符，用 JIT 明确支持且小程序能原样传递的格式。
立即学习“前端免费学习笔记（深入）”；
- 避免斜杠：
w-1\/4（反斜杠转义）在部分小程序基础库中有效，但非通用；更稳的是用w-[25%]（方括号语法需确保小程序支持字符串原样透传） - 避免小数点：
h-1.5→ 改用h-[6px]（换算为像素）或h-6（按theme.spacing[6] === '1.5rem'配置） - 避免方括号内含非法字符：小程序中
w-[996rpx]极大概率失效，应改用预设尺寸（如w-[996px]）或 CSS 变量（w-[var(--width)]，前提是变量已注入） - 响应式前缀（
md:w-1/4）同样受截断影响，优先用容器级断点控制，而非类名级
真正卡住人的，从来不是 JIT 编译慢，而是你写的类名根本没进它的输入流 —— 小程序、Svelte style 块、动态模板字面量，这些场景下，必须先确认字符串是否被环境“消毒”过，再谈 JIT 生效与否。
