@container规则生效需同时满足四个条件：tailwind.config.js中启用experimental.containerQueries并安装@tailwindcss/container-queries插件、CSS中用@layer包裹@container、HTML容器元素添加@container类、Tailwind版本≥3.4。

@container 规则写了但样式没生效，大概率不是写错了，而是四个条件里漏掉了一个。

tailwind.config.js 必须同时开两个开关

只装插件或只开 experimental 都不行，必须双开：

• experimental.containerQueries: true 要写在 tailwind.config.js 的根对象下，不能塞进 theme 或 plugins 里
• plugins: [require('@tailwindcss/container-queries')] 必须显式注册，且确保已运行 npm install -D @tailwindcss/container-queries
• v3.4 是硬门槛，v3.3 及更早版本无论怎么配都无效

@container 规则必须包在 @layer 里

PostCSS 插件只识别 @layer utilities 或 @layer components 内部的 @container，写在全局 CSS 顶层会被静默跳过：

@layer utilities {
  @container (min-width: 28rem) {
    .card-content {
      font-size: 1.1rem;
    }
  }
}

注意：@apply container-md 这类写法不支持——@apply 只处理静态类名，无法生成容器查询逻辑。

HTML 容器元素必须带 container 类

不是光写 CSS 就行，HTML 元素得主动声明自己是容器：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 最简写法：
  （默认 container-type: inline-size）
• 命名容器：
  ，对应 @container card (min-width: 400px)
• 复合类如 container-card 依赖 theme.container.name 配置，否则无效

如果用了自定义 theme.container，要确认没清空整个对象，否则可能覆盖默认行为。

容易被忽略的兼容性细节

容器查询不是“写了就跑”，几个边界情况常导致白屏式失效：

• container-type 值必须是 size、inline-size 或 block-size，normal 或拼写错误会导致容器不可查
• 浏览器 DevTools 里看不到生成的 CSS？不是报错，是规则根本没被解析——检查上面四点
• TypeScript 项目若 require() 报错，先装 @types/node

真正卡住人的，往往不是语法，而是配置链上某个环节断了，而它连 warning 都不抛。