Tailwind CSS v3.4容器查询需同时满足四条件：启用experimental.containerQueries、安装注册@tailwindcss/container-queries插件、HTML元素添加container类、@container规则置于@layer内，缺一不可；v3.3及更早版本不支持。
Tailwind CSS v3.4 的容器查询功能不是“开箱即用”，必须同时满足四个硬性条件：启用 experimental.containerQueries、安装并注册 @tailwindcss/container-queries 插件、HTML 元素带 container 类、@container 规则写在 @layer 内——漏掉任一环，样式完全不生效。
如何正确配置 tailwind.config.js 启用容器查询
插件依赖实验开关，只装插件不改配置等于没装。v3.4 是版本底线，v3.3 及更早版本无论怎么配都无效。
-
experimental: { containerQueries: true }必须写在tailwind.config.js的根对象里，不能嵌套进theme或plugins - TypeScript 用户需确保已安装
@types/node，否则require()可能报错 - 如果项目用了自定义
theme.container配置，要确认没覆盖或清空整个对象，否则可能干扰容器类行为
为什么 @container 规则写了却没效果
常见静默失效不是语法错，而是规则没被 PostCSS 插件识别。它不会报错，只是跳过解析。
-
@container必须放在@layer components { }或@layer utilities { }内部，写在全局 CSS 顶层会被忽略 - 不支持
@apply container-md这类写法——@apply只处理静态类名，无法生成响应式逻辑 - JSX/TSX 中无法直接用
className表达查询条件，必须提前在 CSS 文件中定义好带查询的类名再引用
容器元素为什么始终不触发查询
容器查询不监听视口，只找最近的带 container 类的祖先；但这个类不是装饰符，是尺寸测量的触发器。
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须显式加
class="container"，缺了就永不匹配——哪怕父级有max-w-4xl也不行 -
container默认无宽度约束，若父容器是flex或grid且未设宽，其inline-size为auto，导致min-width条件永远不满足 - 可加命名提升精度：
class="container card-container"，然后写@container card (min-width: 400px)，避免跨组件干扰
调试时最常被忽略的布局上下文问题
浏览器无法对 width: auto 的元素做容器查询。即使写了 @container (min-width: 400px)，若容器没形成块级格式化上下文（BFC）或尺寸坍塌，计算出的宽度就是 0。
- 检查 computed styles 中容器的
inline-size是否真实大于 0 - 稳妥做法：给容器加
max-w-4xl、min-w-0，或包裹一层div并加w-full - 避免用
absolute、inline等定位方式让容器脱离文档流
