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

Question

在tailwind.config.js中添加这个自定义填充类后

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

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

Answer 1

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

幸运的是，Tailwind 有一个解决方案。将 padding 对象移动到 extend 对象中，而不是执行您拥有的操作。

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

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