容器查询在 Tailwind 中需同时满足四个条件：配置 experimental.containerQueries 为 true、注册 @tailwindcss/container-queries 插件、Tailwind ≥3.4、@container 规则必须置于 @layer 内；HTML 容器须显式声明 class="@container"，且具备可测 inline-size。
容器查询在 Tailwind 中不是写个 @container 就能跑的功能，它必须同时满足四个条件，缺一不可——否则样式完全静默失效，DevTools 里也看不到任何生成的 CSS。
tailwind.config.js 必须双开配置
只装插件、只开 experimental、或把配置塞错位置，都会让整个链路中断：
-
experimental.containerQueries: true必须写在tailwind.config.js的根对象下，不能放在theme或plugins里 -
plugins: [require('@tailwindcss/container-queries')]必须显式注册，且确保已执行npm install -D @tailwindcss/container-queries - Tailwind 版本必须 ≥ 3.4；v3.3 及更早版本无论怎么配都无效
- TypeScript 项目若
require()报错，先装@types/node
@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只处理静态类名，无法生成容器查询逻辑 - 命名容器如
@container/card同样适用，但规则仍需包裹在@layer中
HTML 容器元素必须显式声明自己是容器
CSS 层面的 @container 规则不会自动“激活”父元素，必须靠 HTML 主动标记：
立即学习“前端免费学习笔记（深入）”；
- 最简写法：
<div class="@container">（默认 <code>container-type: inline-size） - 命名容器：
<div class="@container/card">，对应 <code>@container card (min-width: 400px) - 若用
container-card这类复合类，需确认theme.container.name在 config 中已正确定义，且未清空整个container对象 - 容器必须有可测量的
inline-size：若父级是flex或grid且未设宽，width: auto会导致查询永远不触发——加max-w-4xl或w-full更稳妥 -
container-type值只能是size、inline-size或block-size；写成normal或拼写错误，容器即不可查 - 浏览器 DevTools 的 computed styles 里，检查该元素的
container-type是否真实生效，以及inline-size是否 > 0 - 绝对定位（
position: absolute）、行内元素（display: inline）会让容器脱离文档流，失去尺寸上下文 - 嵌套多个容器时，不命名会引发目标错乱——比如侧边栏和主区都用
@lg:，实际只想控制主区；建议用语义化短名如@container/main配合@lg/main:underline
调试时最容易被忽略的底层细节
不是语法错，而是容器根本没形成可查询上下文：
真正卡住人的，往往不是 @container 怎么写，而是配置链上某个环节断了，而它连 warning 都不抛。
