Container Queries插件未生效需依次检查：启用experimental.containerQueries、安装并注册插件、容器元素添加container类、@container规则置于@layer内、容器具备布局上下文且尺寸不为0。

Container Queries插件没生效？先确认是否启用了实验性功能

Tailwind CSS 官方的 @tailwindcss/container-queries 插件不是开箱即用的，它依赖 Tailwind 的实验性 containerQueries 功能。如果你写了 @container 规则却完全没渲染出对应样式，大概率是这一步漏了。

• 在 tailwind.config.js 中必须显式开启：

  module.exports = {
    experimental: {
      containerQueries: true,
    },
    // …其他配置
  }

• 插件本身需安装并注册：npm install @tailwindcss/container-queries，然后在 tailwind.config.js 的 plugins 数组里加上 require('@tailwindcss/container-queries')
• 注意：v3.4+ 才原生支持该插件；低于此版本即使装了插件也无效

写 @container 规则时，容器元素必须带 container class

和媒体查询不同，Container Queries 不监听视口，而是监听**最近的、带 container class 的祖先元素**。这个 class 是触发点，不是可选修饰符。

• 必须手动加：<div class="container max-w-4xl">…</div> —— 缺少 container，内部所有 @container 查询都会静默失效
• container 默认不带尺寸约束，建议配合 max-w- 或 min-w- 类一起用，否则容器宽度可能为 auto，导致查询条件（如 width >= 768px）永远不满足
• 可以给容器加命名（如 container-card），然后在 CSS 中用 @container card (min-width: 400px) 精确匹配，避免跨组件干扰

在 CSS 文件里写 @container 时，不能嵌套在 @layer 外部

Tailwind 的容器查询规则必须被识别为“CSS 层级内容”，如果直接写在全局 CSS 文件顶层，PostCSS 插件可能跳过处理。

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

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

下载

• 正确位置：放在 @layer components { } 或 @layer utilities { } 内部，例如：

  @layer components {
    @container (min-width: 400px) {
      .card-title {
        font-size: 1.25rem;
      }
    }
  }

• 不支持在 @apply 中调用容器查询类（比如 @apply container-md），它只处理静态类名，无法生成响应式逻辑
• JSX 中无法直接用 className 表达容器查询条件，必须提前在 CSS 中定义好带查询的类名，再引用

调试时发现查询不触发？检查容器是否具备布局上下文

一个常见静默失败原因是容器元素没有形成块级格式化上下文（BFC）或尺寸坍塌，导致计算出的 width 为 0。

立即学习“前端免费学习笔记（深入）”；

• 典型场景：父容器是 display: flex 或 display: grid，子容器未设 flex: 1 / min-width: 0，实际渲染宽度为 0
• 快速验证方法：给容器加临时边框和背景色，用浏览器开发者工具检查其 computed width 是否符合预期
• 安全做法：容器上加 min-width: 0（防 flex/gird 下溢出截断）和 width: 100%（确保占满可用空间）

容器查询真正起效的地方，往往不在“大屏 vs 小屏”的粗粒度判断，而在于卡片、列表项、侧边栏模块这些局部区域的自适应。一旦容器尺寸逻辑没理清，后面所有查询都成空谈。