时间戳

首页 > 解决方案 > 特定断点处元素的边距在 Tailwind 中不起作用

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

问题描述

我试图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。

标签： csspluginsthemesnext.jstailwind-css

解决方案

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

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

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

  // 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

推荐阅读