Tailwind CSS v3.4首次支持容器查询，但需手动开启experimental.containerQueries、安装并注册@tailwindcss/container-queries插件、HTML元素添加container类、@container规则置于@layer内，缺一不可。
必须手动开启实验配置、安装插件、加container类、把@container写进@layer——漏掉任一环，查询规则就完全不生效。
tailwind.config.js 里必须显式启用 experimental.containerQueries
v3.4 才首次支持容器查询，但它是实验性功能，默认关闭。只装插件不改配置，@container会被 PostCSS 插件跳过解析，静默失效。
-
experimental: { containerQueries: true }这行必须写在tailwind.config.js的根对象里，不能嵌套在theme或plugins下 - 低于 v3.4（比如 v3.3）即使写了这行也没用，版本是硬门槛
- TypeScript 配置（
tailwind.config.ts）需确保已安装@types/node，否则require()可能报错
必须安装并注册 @tailwindcss/container-queries 插件
这个插件不是内置的，也不是“装了就自动工作”。它依赖 Tailwind 的实验开关，且必须被正确加载。
- 安装命令必须带
-D：运行npm install -D @tailwindcss/container-queries（pnpm/yarn 同理） - 在
tailwind.config.js的plugins数组中，写require('@tailwindcss/container-queries')，不能写字符串'@tailwindcss/container-queries' - Django Tailwind 用户应优先用
python manage.py tailwind plugin_install @tailwindcss/container-queries，它会自动处理依赖和注入
@container 规则必须放在 @layer 内部，且容器元素必须带 container 类
容器查询不监听视口，只找最近的、带 container 类的祖先。这个类是触发器，不是装饰符；@container 若写在 @layer 外，PostCSS 就当它不存在。
立即学习“前端免费学习笔记（深入）”；
- HTML 中要写
<div class="container max-w-4xl">...</div>，缺container类，内部所有查询条件永不匹配 -
container默认不设宽度约束，若没配max-w-或被 flex/grid 约束，其inline-size为auto，导致min-width条件永远不满足 - CSS 文件中必须这样写：
@layer components { @container (min-width: 400px) { .card-title { font-size: 1.25rem; } } } - 不支持
@apply container-md这类写法，@apply只处理静态类名，无法生成响应式逻辑
调试时最容易忽略的是容器尺寸是否真实可测
浏览器无法对 width: auto 的元素做容器查询。哪怕你写了 @container (min-width: 400px)，如果父容器没有明确布局上下文（如 width、max-width、flex item、grid item），查询就永远不会触发。
- 检查 DevTools 的 Layout 面板，确认目标容器有非零的
inline-size - 避免把容器放在
overflow: hidden且无padding的父元素里，margin: auto可能被裁剪 - 命名容器（如
container-card）再用@container card (min-width: 400px)，比无名查询更可控，也方便跨组件隔离
