Tailwind CSS分数间距类（如mr-1.5）失效原因及解决方法

我在项目中使用Tailwind CSS（用于Puppeteer导出PDF，普通HTML渲染也存在此问题），发现mr-1.5、ml-2.5这类带分数值的间距工具类完全无效，但mr-1、mr-2等整数类可以正常工作。

示例代码：

<div class="flex">
  <span class="mr-1">mr-1 works</span>
  <span class="mr-1.5">mr-1.5 does not work</span>
  <span class="mr-2">mr-2 works</span>
</div>

预期中间的span元素应该有6px右外边距（根据Tailwind文档，mr-1.5对应0.375rem，换算后为6px），但实际没有任何额外间距，就像这个类根本不存在一样。我尝试过mr-[0.375rem]、mr-[1.5]这类自定义值的类，同样无效，推测是分数值导致的问题。

更新：问题根源及解决 #

问题出在Tailwind生成CSS的注入方式上。我之前通过CDN引入Tailwind时，仅在<style>标签中使用@tailwind base; @tailwind components; @tailwind utilities;，这种情况下Tailwind的JIT引擎没有正确识别带小数的工具类，导致对应的CSS规则未生成。

解决步骤：

• 确认项目启用了Tailwind JIT模式：Tailwind v3+默认启用JIT，若使用旧版本需在tailwind.config.js中设置mode: 'jit'
• CDN引入场景：改用Tailwind官方的JIT CDN链接，替换原普通CDN引用
• 本地项目场景：检查tailwind.config.js配置正确，确保构建工具（如Vite、Webpack）能正常编译Tailwind，生成包含小数类的完整CSS规则

内容的提问来源于stack exchange，提问作者Olivér Raisz