如何将自定义填充权添加到顺风？

【问题标题】：How to add custom padding-right to tailwind?如何将自定义填充权添加到顺风？
【发布时间】：2021-11-21 21:51:38
【问题描述】：

我想要一个比 tailwind 当前提供的更大的填充值（pr-96，大约 24rem）我想要我的项目大约 40rem。

按照文档，我试过了，但我无法运行 npm run build 而不会出现错误。


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

Error:the xx class does not exist, but xx does. 
If I remove the code I added above, error goes away.

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您不需要在创建xxl 实用程序时指定属性padding-right，只需指定值和单位，这一行：

xxl: 'padding-right: 40rem'

应该是：

xxl: '40rem'

这将为所有填充类p-xxl、pr-xxl、pl-xxl 等提供 40rem 的 xxl 大小...

但是，当您想要替换所有填充实用程序时，您应该只使用填充作为主题的直接子级。如果您只想将此尺寸添加到现有的填充尺寸中，您应该在 theme 中使用 extend，如下所示：

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

【讨论】：