containerQueries需手动开启实验功能并安装插件，v3.4+才支持；@container必须写在@layer内且容器元素需带container类；:has()默认可用但依赖浏览器兼容性。
containerQueries 实验功能必须手动开启，否则所有 @container 规则静默失效；:has() 子选择器支持默认启用但需注意浏览器兼容性边界。
tailwind.config.js 必须显式启用 containerQueries
旧版 Tailwind（v3.3 及更早）根本不识别 @container 语法。v3.4 引入该能力，但不是开箱即用——它被归为实验性功能，必须在配置中主动声明：
-
experimental: { containerQueries: true }这一行缺一不可，漏掉就等于没装 - 仅开启配置还不够：还需安装插件
@tailwindcss/container-queries并注册到plugins数组 - v3.4 是最低可用版本，低于此版本即使加了配置也完全无效
- 容器元素必须带
container类（如<div class="container max-w-4xl">），否则内部查询不会触发 <h3> <code>@container规则必须写在@layer内部PostCSS 插件只处理被标记为“CSS 层级内容”的代码块。直接把
@container写在全局 CSS 文件顶层，会被跳过解析：- 正确位置是
@layer components { }或@layer utilities { }内部 - 不能嵌套在其他规则里（比如不能放在
.card { }块内） - 不支持用
@apply调用容器查询类，@apply container-md这类写法会报错或静默忽略 - JSX 中无法动态生成容器查询条件，所有响应式逻辑必须提前在 CSS 中定义好类名再引用
:has()选择器已默认支持，但渲染行为依赖浏览器v3.4 开始，Tailwind 允许你在工具类中直接使用
:has()（例如group-has-[&_input:checked]:bg-blue-500），但实际生效与否由运行时环境决定：立即学习“前端免费学习笔记（深入）”；
- Tailwind 本身只负责生成对应 CSS，不校验浏览器是否支持
:has() - Chrome 105+、Safari 15.4+、Firefox 121+ 支持，旧版 Safari 和部分安卓 WebView 仍不支持
- 若目标环境包含不支持的浏览器，建议搭配
@supports selector(:has(...))做降级 - 避免在关键交互路径上强依赖
:has()，比如表单验证状态切换
真正容易被忽略的是容器查询的“触发链”：它不看视口，只看最近的带
container类的祖先；而这个祖先若没有明确宽度约束（如max-w-），其inline-size可能为auto，导致所有min-width条件永远不满足——调试时先检查容器是否真有可测量的尺寸。 - 正确位置是
