Tailwind中pl-1、pl-1.5等小于pl-2的左内边距为何不生效？

可能的原因： #

• Tailwind配置缺失小间距定义：如果项目自定义了Tailwind的spacing主题配置，却未包含1和1.5对应的间距值，pl-1、pl-1.5这类小内边距类就不会生成对应的CSS样式，自然无法生效；而pl-2及以上因配置中存在对应值，所以能正常工作。
• Purge摇树优化误删类：Tailwind的Purge机制会移除项目中未被检测到的CSS类。如果pl-1仅在当前位置使用，且Tailwind的内容扫描路径未覆盖当前文件（比如Vue项目未包含.vue文件路径），或是因{{ $t('App.LogoTitle') }}这类动态语法导致Purge无法识别类名，就会把pl-1、pl-1.5从最终CSS中删除。
• 视觉错觉：pl-1对应0.25rem（通常为4px），pl-1.5对应0.375rem（通常为6px），这个间距可能和text-2xl字体的字距、字母起始位置重叠，导致视觉上看起来无变化，但实际CSS样式已生效。

解决方案： #

1. 修复Tailwind spacing配置
   打开tailwind.config.js，确保theme.spacing中包含1和1.5的定义。若为扩展默认配置，使用extend：

   module.exports = {
     theme: {
       extend: {
         spacing: {
           '1': '0.25rem',
           '1.5': '0.375rem',
         }
       }
     }
   }
   

   若为完全覆盖默认spacing，则需列出所有需要的间距值，包括小间距。

2. 调整Purge内容扫描路径
   在tailwind.config.js的content（旧版本为purge）字段中，确保包含所有使用Tailwind类的模板文件路径：

   module.exports = {
     content: [
       './src/**/*.{vue,js,ts,jsx,tsx}',
       './public/index.html'
     ],
     // 其他配置...
   }
   

   这样Tailwind能准确检测到pl-1、pl-1.5类，避免被误删。

3. 验证样式实际生效情况
   打开浏览器开发者工具，选中<p>元素，查看**盒模型（Box Model）**面板，确认padding-left是否存在。若样式生效但视觉不明显，可给<p>临时添加bg-gray-100类，通过背景色直观看到内边距范围。

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