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

【问题标题】：How to modify .container css class breakpoint for Tailwind CSS library using tailwind.config.js如何使用 tailwind.config.js 修改 Tailwind CSS 库的 .container css 类断点
【发布时间】：2022-01-09 20:22:00
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css tailwind-css tailwind-in-js

【解决方案1】：

你可以覆盖断点 =>

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

【讨论】：

我不想覆盖整个断点，我需要跳过容器 css 类的几个断点。
@ShahAlom 我更新了我的答案。请检查我在回答中分享的链接。
谢谢。它解决了我的问题。

【解决方案2】：

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

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

  theme: {
    container: {
      ...

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

【讨论】：