根据你为什么要把max-width设置得更小一点，有两个配置选项你可能想要去。如果你想要的话，你也可以同时使用这两个。
如果你只是想让最大宽度小一点，这样内容就不会贴到屏幕的边缘，你可能只想添加一些填充。这将在容器的内部添加水平填充。你也可以将容器配置为居中。设置较小的最大宽度并不会阻止内容到达边缘，它只是让内容以较小的宽度到达边缘。
然而，如果你真的想让max-width更小，你也可以在容器中配置自定义屏幕大小。这似乎没有被记录下来，但在源代码中挖掘显示，容器插件首先检查container.screens，然后福尔斯正常的screens配置。这让你可以在不影响正常断点的情况下配置容器断点。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    container: {
      // you can configure the container to be centered
      center: true,

      // or have default horizontal padding
      padding: '1rem',

      // default breakpoints but with 40px removed
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
        '2xl': '1496px',
      },
    },
  },
  variants: {},
  plugins: [],
}

看看这个Tailwind Play演示了这两个策略。你可以看到容器的颜色变化（显示正常的断点修饰符没有改变），而容器的大小更小。

你也可以定义一个tailwind插件，如下所示：

module.exports = {
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen sm': {
            maxWidth: '640px',
          },
          '@screen md': {
            maxWidth: '768px',
          },
          '@screen lg': {
            maxWidth: '1280px',
          },
          '@screen xl': {
            maxWidth: '1400px',
          },
        }
      })
    }
  ]
}

资源：https://stefvanlooveren.me/blog/custom-container-width-tailwind-css

您可以通过在tailwind.config.js的corePlugins部分将container属性设置为false来禁用它

// tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     container: false,
    }
  }

您可以在Tailwind文档中找到它。

我就是这么解决的

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    @apply minsm:max-w-[640px] minmd:max-w-[768px] minlg:max-w-[1024px] minxl:max-w-[1280px] min2xl:max-w-[1536px];
  }
}

tailwind.config.js

theme: {
    screens: {
      '2xl': { max: '1535px' },
      xl: { max: '1279px' },
      lg: { max: '1023px' },
      md: { max: '767px' },
      sm: { max: '639px' },

      minsm: { min: '640px' },
      minmd: { min: '768px' },
      minlg: { min: '1024px' },
      minxl: { min: '1280px' },
      min2xl: { min: '1536px' },
    },
}

我发现它是这样工作的，我把它放在src/style.css中

@layer components{
  .container {
    @apply max-w-7xl px-4 self-center;
  }
}

我刚刚遇到了同样的问题。到目前为止，所有的答案都是很好的修复，但从顺风CSS添加一个最大宽度实用程序类对我来说是更少的代码和配置。
HTML代码

<div class="container max-w-full"> Hello I'm a container </div>

tailwind.config.js

theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },

您可以查看tailwind文档，了解在https://tailwindcss.com/docs/max-width上自定义最大宽度的更多方法

这就是我如何在/src/input. css中做到这一点的

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "BYekan";
    src: url("../font/BYekan.ttf");
  }

  html {
    @apply font-BYekan;
  }

  .container {
    @apply max-w-6xl;
  }
}