如何为Tailwind CSS自定义padding-right取值 配置后打包报错如何解决

错误原因 #

• 未将自定义padding配置放在theme.extend字段下，直接覆写根theme.padding会清空Tailwind默认自带的所有padding尺寸，导致原有pr-*类全部失效，触发类不存在的报错
• 自定义padding的属性值填写错误，仅需填写CSS值即可，不需要带padding-right:属性声明，Tailwind会自动根据使用的类匹配对应属性

常用配置方案（保留默认padding值，追加自定义尺寸） #

该方案不会影响原有pr-1到pr-96的类使用，同时新增你需要的40rem尺寸：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      padding: {
        'xxl': '40rem'
      }
    }
  }
}

配置生效后使用pr-xxl类即可获得40rem的右内边距。

特殊配置方案（完全覆盖默认padding值） #

如果你确实不需要所有默认padding尺寸，只需要保留自定义的xxl，可以直接修改根theme.padding，修正值格式即可：

// tailwind.config.js
module.exports = {
  theme: {
    padding: {
      'xxl': '40rem'
    }
  }
}

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