Tailwind CSS容器查询需同时满足四条件：v3.4+版本、启用experimental.containerQueries、安装注册@tailwindcss/container-queries插件、@container规则置于@layer内，缺一即静默失效。
容器查询插件不是“装了就能用”的功能，它必须同时满足四个条件：Tailwind v3.4+、experimental.containerQueries: true 开启、安装并注册 @tailwindcss/container-queries 插件、所有 @container 规则写在 @layer 内——漏掉任一环，样式完全静默失效。
为什么 @container 类写了但样式不生效
这不是语法错误，而是 PostCSS 插件根本没识别到规则。它不会报错，只是跳过解析，DevTools 里也看不到对应 CSS 输出。
-
tailwind.config.js中experimental.containerQueries: true必须放在根对象下，不能嵌套进theme或plugins - 必须显式安装插件：
npm install -D @tailwindcss/container-queries，且在plugins数组中require('@tailwindcss/container-queries') - HTML 中容器元素必须带
@container类（或container类，取决于配置），不能只靠 CSS 规则定义 - 所有
@container规则（包括命名容器如@container card）必须包裹在@layer utilities或@layer components里
如何正确使用命名容器避免嵌套冲突
多个容器嵌套时，不命名会导致查询目标错乱。比如侧边栏卡片和主区卡片都用 @lg:，实际只想控制主区的响应行为。
- 给容器加
@container/main类，对应 CSS 中写@container main (min-width: 400px) - 命名后，变体语法变成
@lg/main:underline，确保只作用于名为main的容器 - 命名必须是合法标识符（不能含空格、斜杠、点），且全局唯一；重复命名会覆盖，建议用语义化短名如
card、sidebar、dialog - 如果用
container-name工具类（如container-name-card），需确认theme.container.name在 config 中已正确定义
怎么让容器查询配合 Grid 布局真正生效
Grid 容器本身需要明确的 container-type 才能被查询，仅设 grid 类不够。
立即学习“前端免费学习笔记（深入）”；
- Grid 容器必须同时具备
container类（或@container）和container-type: inline-size（可通过container-type-inline-size工具类实现） - 若 Grid 子项用了
col-span-2，而父容器宽度变化触发容器查询，需确保子项的col-span不与新列数冲突（例如从 3 列切到 5 列时，col-span-3可能溢出） -
gap不受容器查询影响，它始终作用于当前 Grid 容器；但gap值本身可以响应式，如gap-4 md:gap-6 - 不要指望容器查询自动重算
grid-template-columns—— 它只触发类名切换，列轨道仍需你用grid-cols-*或自定义grid-cols-5显式控制
最易被忽略的一点：容器查询依赖浏览器原生 container-type 支持，目前仅 Chromium 114+ 和 Safari 16.4+ 稳定支持，Firefox 仍需手动开启实验标志；生产环境务必检查目标用户浏览器覆盖率。
