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

问题描述

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

<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也能正常工作，但响应式的margin（padding）不起作用。 我使用Next.js和Tailwind CSS。

解决方法

对不起，但我自己弄清楚了。 这是因为顺风的配置。

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

所以我通过将保证金变体修改为：

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

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