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

Question

我试图div通过添加 a 在特定断点处设置元素的边距{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响应式也能正常工作，但响应式的边距（填充）不起作用。我使用 Next.js 和 Tailwind CSS。

Answer 1

抱歉，但我自己想出了办法。这是因为顺风配置。

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

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

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

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

更新 11/2021

2021 年 11 月，Tailwind 发布了 3.0 版本，其中有一些重大更改。

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

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