Tailwind 2.2.8 生成异常类导致后续声明样式全部失效问题排查

问题诱因 #

这个问题是Tailwind 2.2.8版本的已知缺陷，核心原因如下：

• 该异常类是Tailwind开发团队在测试JIT模式的任意值语法时留下的测试用例，版本发布时意外被打包进了正式生产包，不属于业务生成的样式。
• 类名中包含多层未正确转义的反斜杠和方括号，会导致浏览器的CSS解析器识别选择器时出现语法误判，将该类之后的所有CSS内容都识别为当前选择器的一部分，直接中断后续所有样式的解析生效。
• 少数情况下如果项目开启JIT模式后，扫描到业务代码/第三方依赖中存在和这个类名一致的字符串，也会触发JIT自动生成对应样式规则。

解决方法 #

• 最稳妥的方案是升级Tailwind版本到2.2.16及以上的2.x稳定版，或者直接升级到3.x版本，官方已经在后续迭代中移除了该残留测试代码，彻底修复了这个问题。
• 如果暂时无法升级版本，可以在tailwind.config.js中添加黑名单规则，屏蔽该类的生成：

module.exports = {
  // 其余配置保持不变
  blocklist: [
    'w-[this-is\\\\]w-\\\\[weird-but-valid]'
  ]
}

• 也可以在CSS后处理环节添加规则，直接过滤掉包含该类名的整条样式规则，不影响其余样式正常加载。
• 排查项目业务代码及引入的第三方UI组件、工具库，确认是否存在硬编码的该类名字符串，如有直接删除即可。

内容的提问来源于stack exchange，提问作者adjustment layer