tailwind-css - 为什么我添加自定义后，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 对象的情况下设置配置时，您将完全覆盖现有配置。