如何仅删除 Tailwind 2 中的 2xl 断点？

Question

我已经升级到 tailwind 2，它有一个新的 2xl 断点。这会导致任何带有 container class 的元素变得比以前更宽。

如何只删除 2xl 断点，同时保留所有其他默认断点？

Answer 1

虽然 breakpoints documentation 解释了如何覆盖现有断点或添加新断点，但没有解释如何删除单个断点。

在您的 tailwind.config.js 文件中输入以下内容。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: Object.fromEntries(
      Object.entries(defaultTheme.screens).filter(([key, value]) => key !== '2xl')
    )
  }
}

这通过导入 defaultTheme，将其 screens 对象转换为 key/value“条目”，按键过滤那些整体以排除 2xl，然后重新组合使用 fromEntires().

将过滤器的结果返回到对象

可选地，如果您只想保留某些断点，您可以反转过滤器。

    screens: Object.fromEntries(
      Object.entries(defaultTheme.screens).filter(([key, value]) => ['sm', 'xl'].includes(key))
    )

以上只会保留 sm 和 xl 断点。

如何仅删除 Tailwind 2 中的 2xl 断点？

How do I remove just the 2xl breakpoint in Tailwind 2?

media-queries

responsive

tailwind-css