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

Posted 2023-03-07

【中文标题】特定断点处元素的边距在 Tailwind 中不起作用

【英文标题】：margin of an element at specific breakpoints doesn't work in 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 设置不正确？

感谢您的评论。我自己找到了答案。

【参考方案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