如何在TailwindCSS v4中覆盖容器宽度？

原问题 #

我之前通过tailwind.config.js配置覆盖容器宽度，但现在该文件无法使用，只能用纯CSS实现相同效果。原配置如下：

export default {
  theme: {
    extend: {
      screens: {
        md: "1080px",
        lg: "1280px",
      },
      container: {
        screens: {
          md: "1080px",
          lg: "1200px",
        },
      },
    },
  },
}

我试过@screen和@theme定义--breakpoint-md、--container-md等变量的方法，但都没效果。

更新说明 #

我按下面的代码定义后，用于测试断点的背景色失效，所有元素都变成红色，这是为什么？
代码示例：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="tailwindcss">
@import "tailwindcss";

/* I'm commenting it out because it's not necessary for the minimal reproduction. */
/* @plugin "@tailwindcss/typography"; */
/* @source "../views"; */
/* @source "../../content"; */

@theme {
  --breakpoint-*: initial;
  --breakpoint-md: 1080px;
  --breakpoint-lg: 1280px;
  --container-*: initial;
  --container-md: 1080px;
  --container-lg: 1200px;
}
</style>

<div class="sm:max-sm:bg-yellow-400 lg:bg-red-800 2xl:bg-purple-800 heading-36 container mx-auto">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, officiis
  soluta! Unde dolorum, officia ex ab distinctio iusto, repellendus maiores
  doloribus numquam iste incidunt tempore labore! Incidunt voluptatem non
  quibusdam!
</div>

一、为什么所有元素都变成红色？ #

你在@theme里用--breakpoint-*: initial;会清除所有默认断点变量，包括sm、xl、2xl这些。这导致Tailwind无法识别sm:、2xl:这些断点前缀，所以这些类会被忽略，只有lg:bg-red-800生效——因为你重新定义了lg断点，但其他断点失效后，lg的起始条件会被默认当成最小宽度，所以所有屏幕尺寸下都会应用红色背景。

二、纯CSS实现容器宽度及断点覆盖的正确方法 #

不需要清除所有断点变量，只需要覆盖你需要修改的md、lg断点，同时正确定义容器的宽度变量：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="tailwindcss">
@import "tailwindcss";

@theme {
  /* 覆盖md、lg断点 */
  --breakpoint-md: 1080px;
  --breakpoint-lg: 1280px;
  /* 定义容器在对应断点下的宽度 */
  --container-md: 1080px;
  --container-lg: 1200px;
}
</style>

<div class="max-sm:bg-yellow-400 lg:bg-red-800 2xl:bg-purple-800 container mx-auto">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, officiis
  soluta! Unde dolorum, officia ex ab distinctio iusto, repellendus maiores
  doloribus numquam iste incidunt tempore labore! Incidunt voluptatem non
  quibusdam!
</div>

关键说明 #

• 移除--breakpoint-*: initial;和--container-*: initial;，避免清除默认断点配置，这样sm、2xl等默认断点仍能正常工作。
• sm:max-sm:bg-yellow-400写法有误，正确的移动端断点写法是max-sm:bg-yellow-400（表示屏幕小于sm时生效），不需要加sm:前缀。

另一种纯CSS自定义方式（不依赖@theme） #

如果@theme方式仍有问题，可以直接用CSS媒体查询自定义容器样式：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

/* 自定义断点下的容器宽度 */
@media (min-width: 1080px) {
  .container {
    max-width: 1080px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}
</style>

<div class="max-sm:bg-yellow-400 lg:bg-red-800 2xl:bg-purple-800 container mx-auto">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, officiis
  soluta! Unde dolorum, officia ex ab distinctio iusto, repellendus maiores
  doloribus numquam iste incidunt tempore labore! Incidunt voluptatem non
  quibusdam!
</div>

这种方式直接通过媒体查询覆盖容器的max-width，兼容性更好，不需要依赖Tailwind的@theme规则。

内容的提问来源于stack exchange，提问作者fajriyan