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

Question

我试图通过添加 {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 class 有效。

Tailwind 的所有 classes 都运行良好，响应式 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

2021 年 11 月更新

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

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

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

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

margin of an element at specific breakpoints doesn't work in Tailwind

css

plugins

themes

next.js

tailwind-css