Tailwind v4 + Next.js 15中Container Queries无法正常工作

Tailwind v4的容器查询（Container Queries）和屏幕断点语法并不通用，你直接用@md:作为容器查询前缀是核心问题——@md是屏幕断点的专属前缀，容器查询需要基于容器自身的尺寸定义触发条件，而非复用屏幕断点的命名。

错误根源 #

你的代码仅给父元素添加了@container声明容器，但未定义容器查询的触发尺寸规则，直接套用@md:这种屏幕断点语法，Tailwind无法识别为容器查询逻辑。

两种解决方式 #

方式1：直接使用尺寸条件编写容器查询

把代码里的@md:替换为基于容器尺寸的条件语句，比如希望容器宽度≥768px时触发样式，就写成@container (min-width: 768px):：

<div className="grid grid-cols-7 text-center font-h3 mb-1" role="row">
  {new Array(7).fill(0).map((_, i) => (
    <div key={i} role="columnheader" className="@container">
      <span className={clsx("hidden @container (min-width: 768px):inline", small ? "lowercase text-primary-500": "@container (min-width: 768px):normal-case @container (min-width: 768px):text-black")}>
        {small ? shortWeekLabels[i] : longWeekLabels[i]}
      </span>
      <span className="@container (min-width: 768px):hidden lowercase text-primary-500">
        {shortWeekLabels[i]}
      </span>
    </div>
  ))}
</div>

方式2：在配置中定义容器断点

如果想复用类似md的简洁命名，可在tailwind.config.js里自定义容器查询断点：

export default {
  theme: {
    containerQueries: {
      md: '(min-width: 768px)',
    },
  },
}

之后就能用@container md:的语法编写样式，代码修改为：

<div className="grid grid-cols-7 text-center font-h3 mb-1" role="row">
  {new Array(7).fill(0).map((_, i) => (
    <div key={i} role="columnheader" className="@container">
      <span className={clsx("hidden @container md:inline", small ? "lowercase text-primary-500": "@container md:normal-case @container md:text-black")}>
        {small ? shortWeekLabels[i] : longWeekLabels[i]}
      </span>
      <span className="@container md:hidden lowercase text-primary-500">
        {shortWeekLabels[i]}
      </span>
    </div>
  ))}
</div>

关键注意事项 #

• 容器查询的触发依据是当前容器的宽度，而非屏幕宽度，需确保@container所在元素有明确的宽度约束（你的代码中父级是grid布局，子元素会自动分配宽度，满足要求）。
• Tailwind v4中容器查询必须携带@container前缀，不能直接用@md:这类屏幕断点语法，二者属于不同的命名空间。

内容的提问来源于stack exchange，提问作者Bexy-Lyn