@container规则生效需同时满足四个条件：tailwind.config.js中启用experimental.containerQueries并安装@tailwindcss/container-queries插件、CSS中用@layer包裹@container、HTML容器元素添加@container类、Tailwind版本≥3.4。
@container 规则写了但样式没生效，大概率不是写错了，而是四个条件里漏掉了一个。
tailwind.config.js 必须同时开两个开关
只装插件或只开 experimental 都不行，必须双开：
-
experimental.containerQueries: true要写在tailwind.config.js的根对象下，不能塞进theme或plugins里 -
plugins: [require('@tailwindcss/container-queries')]必须显式注册，且确保已运行npm install -D @tailwindcss/container-queries - v3.4 是硬门槛，v3.3 及更早版本无论怎么配都无效
@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 只处理静态类名，无法生成容器查询逻辑。
立即学习“前端免费学习笔记（深入）”；
HTML 容器元素必须带 container 类
不是光写 CSS 就行，HTML 元素得主动声明自己是容器：
- 最简写法：
<div class="@container">（默认 <code>container-type: inline-size） - 命名容器：
<div class="@container/card">，对应 <code>@container card (min-width: 400px) - 复合类如
container-card依赖theme.container.name配置，否则无效 -
container-type值必须是size、inline-size或block-size，normal或拼写错误会导致容器不可查 - 浏览器 DevTools 里看不到生成的 CSS？不是报错，是规则根本没被解析——检查上面四点
- TypeScript 项目若
require()报错，先装@types/node
如果用了自定义 theme.container，要确认没清空整个对象，否则可能覆盖默认行为。
容易被忽略的兼容性细节
容器查询不是“写了就跑”，几个边界情况常导致白屏式失效：
真正卡住人的，往往不是语法，而是配置链上某个环节断了，而它连 warning 都不抛。
