css - 如何使用 tailwind.config.js 修改 Tailwind CSS 库的 .container css 类断点

Question

根据下面的截图，Tailwind css 库为默认、sm、md、lg、xl、2xl屏幕尺寸提供了 6 个断点。

我想要两个断点。默认情况下，.containercss 类将具有 100% 的宽度，然后当屏幕尺寸大于 1280 像素时，宽度将固定为 1280 像素。

我可以在我的 css 文件中创建 css 规则，但是，由于 Tailwind 提供tailwind.config.js文件来更改样式，我想从 js 文件中执行此操作。

如何使用文件为.containercss 类设置响应断点？tailwind.config.js

Answer 1

您可以覆盖断点=>

相关文档 = https://tailwindcss.com/docs/screens

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

注意：上面的代码会影响整个断点。

如果您只想更改容器，我认为下面的链接会对您有所帮助。 https://stackoverflow.com/a/67915435/7775650

Answer 2

从@cem-karakurt 在之前的答案中提到的https://stackoverflow.com/a/67915435/7775650获得了解决方案。

// tailwind.config.js
module.exports = {
  ...

  theme: {
    container: {
      ...

      screens: {
        xl: '1240px',
      },
    },
  },
  
  ...
}