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

【问题标题】：How do I remove just the 2xl breakpoint in Tailwind 2?如何仅删除 Tailwind 2 中的 2xl 断点？
【发布时间】：2021-03-15 07:31:02
【问题描述】：

我已升级到具有新的 2xl 断点的 tailwind 2。这会导致任何具有container 类的元素变得比以前更宽。

如何在保留所有其他默认断点的同时仅删除 2xl 断点？

【问题讨论】：

标签： media-queries responsive tailwind-css

【解决方案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对象转换为键/值“条目”，通过键过滤这些整体以排除2xl，然后使用@将过滤器的结果重新组合回一个对象987654327@.

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

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

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

【讨论】：

通常，你只有 3/4 个断点。因此，将它们全部写入 -1 也不是那么耗时。 ^^
@kissu 当然，但是你复制的值可能会改变。
只在你的顺风配置文件中写入 3 个值而不是 4 个？
@kissu 我宁愿挑选默认值也不愿重新输入它们的值。这样默认主题的更新就会通过。