为什么我添加自定义后，tailwind css 的默认填充类不起作用？

【问题标题】：Why the default padding classes of tailwind css not working after I add a custimization to It?为什么我添加自定义后，tailwind css 的默认填充类不起作用？
【发布时间】：2021-06-09 18:48:23
【问题描述】：

在 tailwind.config.js

中添加此自定义填充类后

  module.exports = {
         theme: {
      padding: {
          yt: '56.25%'
        }
    }

我可以将该类用作 pb-yt 进行底部填充。然而，过去正常工作的填充类现在不起作用。例如：p-8 p24 px-4 pb-4 是 tailwind 的默认类，在我添加自定义类之前它曾经工作。我在这里做错了什么？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您希望扩展配置（例如，添加 p-yt 类但保留现有的填充类）。

幸运的是，Tailwind 有一个解决方案。将padding 对象移动到extend 对象中，而不是做你所拥有的。

module.exports = {
  theme: {
    extend: {
      padding: {
        yt: '56.25%'
      },
    }
  },
}

这告诉 TailwindCSS 添加p-yt 实用程序并保留现有的填充实用程序。当您设置没有extend 对象的配置时，您将完全覆盖现有配置。

【讨论】：