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

Question

我升级到了顺风2，它有一个新的2xl断点。这将导致具有container类的任何元素变得比以前更宽。

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

Answer 1

虽然断点文档解释了如何覆盖现有的断点或添加新的断点，但它并没有解释如何删除单个断点。

在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、然后使用fromEntires()将筛选结果重新组合回对象来实现的。

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

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

以上只保留sm和xl断点。