TailwindCSS v4中容器自定义最大宽度不生效问题求助

大家好，我最近在用HTML、原生JS和Tailwind V4做项目练手，目前遇到了容器自定义最大宽度不生效的问题，想请各位帮忙看看！

我已经参考了相关方式自定义了断点和容器配置，断点部分都能正常工作，但容器的max-width就是不生效。我的需求很明确：当屏幕宽度大于等于1900px（也就是我自定义的3xl断点）时，容器的宽度要固定为1440px，但现在无论怎么调整都达不到预期效果。

以下是我的相关代码：

package.json #

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.11",
    "tailwindcss": "^4.1.11"
  },
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./assets/styles.css --watch"
  }
}

input.css #

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@import "tailwindcss";

@theme {
  /* Font families */
  --font-custom: "Poppins", "sans-serif";
  /* Colors */
  --color-blk: rgba(49, 49, 49, 1);
  --color-gr: rgba(6, 166, 79, 1);
  --color-blue: rgba(144, 189, 248, 1);
  /* Breakpoints */
  --breakpoint-*: initial; /* 禁用默认基于rem的断点，改用px断点 */
  --breakpoint-sm: 575px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1900px;
  /* Container specific breakpoints */
  --container-*: initial; /* 禁用默认基于rem的容器断点 */
  --container-3xl: 1440px;
}

@utility container {
  margin-inline: auto; /* 居中 */
  padding-inline: 2rem;
}

@layer base {
  *, *::after, *::before {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    outline: none;
  }
  html {
    scroll-behavior: smooth;
    font-size: 62.5%;
    box-sizing: border-box;
  }
  body {
    @apply font-custom text-[1.6rem];
  }
  a {
    @apply no-underline;
  }
  p {
    @apply text-[1.6rem];
  }
}

HTML文件 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="assets/styles.css" rel="stylesheet" />
</head>
<body>
  <div class="@container 3xl:bg-red-100">
    <div class="flex flex-col">
      <h1 class="text-3xl font-regular font-customLight underline text-center text-colorBlue bg-red-500 p-5">Hello world!</h1>
      <p class="font-custom font-light text-gr max-3xl:text-red-500">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </div>
  <div class="sm:max-md:bg-yellow-400 lg:bg-red-800 2xl:bg-purple-800 heading-36 @container">
    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>
</body>
</html>

我已经尝试重置了默认的容器断点配置，但容器的最大宽度还是没有按预期生效，有没有哪位朋友能帮我找出问题所在？非常感谢！

内容来源于stack exchange