特定断点处元素的边距在 Tailwind 中不起作用答案

【问题标题】：margin of an element at specific breakpoints doesn't work in Tailwind特定断点处元素的边距在 Tailwind 中不起作用
【发布时间】：2021-01-03 09:38:15
【问题描述】：

我试图通过添加{screen}: prefix 在特定断点处设置div 元素的边距，但它不起作用。我尝试的如下；

<div className={'flex justify-center'}>
  <div className={'w-full my-8 sm:my-20 md:my-48'}>
    <div {...props}>
      {children}
    </div>
  </div>
</div>

检查模式，我可以确定只有 my-8 类有效。

所有的 Tailwind 类都运行良好，flex 用于响应式也可以，但用于响应式的边距（填充）不起作用。我使用 Next.js 和 Tailwind CSS。

【问题讨论】：

所以你确实尝试了其他的东西，比如sm:bg-red-500 并且它有效，但边距和填充没有？也许您的 PurgeCss 设置不正确？
感谢您的评论。我自己找到了答案。

标签： css plugins themes next.js tailwind-css

【解决方案1】：

对不起，我自己想通了。这是因为顺风配置。

由于不是从头开始的项目，我没有机会检查配置。

所以我通过将边距变体修改为：

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     margin: ['hover'],
+     margin: ['responsive', 'hover'],
    }
  }

参考： https://tailwindcss.com/docs/margin#responsive-and-pseudo-class-variants

2021 年 11 月更新

2021 年 11 月，Tailwind 发布了 3.0 版，它有一些重大变化。

其中一项更改是，您可以从 tailwind.config.js 文件中删除 variants 部分。

参考：https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration

【讨论】：