容器查询在 tailwind 中需同时满足四条件：v3.4+、experimental.containerqueries: true（根级）、安装并显式注册@tailwindcss/container-queries插件、@container规则必须置于@layer内，缺一即静默失效。
容器查询在 Tailwind 中不是装上插件就自动生效的功能，它必须同时满足四个条件：Tailwind v3.4+、experimental.containerQueries: true 开启、安装并注册 @tailwindcss/container-queries 插件、所有 @container 规则写在 @layer 内——漏掉任一环，样式完全静默失效，DevTools 里也看不到对应 CSS。
安装与注册插件必须显式完成
仅靠 npm install -D @tailwindcss/container-queries 不够，还必须在 tailwind.config.js 的 plugins 数组中显式 require：
module.exports = {
// ⚠️ experimental 必须在根对象下，不能嵌套进 theme 或 plugins
experimental: { containerQueries: true },
plugins: [
require('@tailwindcss/container-queries'), // ✅ 必须写在这里
// 其他插件...
],
}
- TypeScript 项目若报
require类型错误，需确保已安装@types/node - v3.3 及更早版本无论怎么配都无效；v4.0 已原生支持，无需插件，但配置结构不同
- 如果项目用了自定义
theme.container，要确认没覆盖整个对象，否则可能干扰container类行为
@container 规则必须包裹在 @layer 内
@container 规则不能直接写在全局 CSS 顶层，否则 PostCSS 插件会跳过解析，不报错也不生成任何输出：
@layer utilities {
@container (min-width: 32rem) {
.card-content {
display: flex;
gap: 1rem;
}
}
}
- 只能放在
@layer components或@layer utilities内部 - 命名容器如
@container/my-card同样适用，但规则仍需包裹在@layer -
@apply container-md这类写法无效——@apply只处理静态类名，无法生成容器查询逻辑
HTML 容器元素必须带 container 类（或 @container）
CSS 层面的 @container 规则不会自动“激活”父元素为容器，必须显式标记：
<div class="container"> <!-- ✅ 正确：使用默认 container 类 --> <div class="@lg:underline">text</div> </div> <p></p><div class="@container"> <!-- ✅ 也可用 @container 类（取决于配置）--> <div class="@lg:underline">text</div> </div>
- 默认情况下，
container类由 Tailwind 自动提供（基于theme.container配置） - 若改用
@container类名，需确认tailwind.config.js中未禁用该类生成 - 仅靠 CSS 设置
container-type: inline-size不足以触发 Tailwind 的容器查询机制
最容易被忽略的是 @layer 包裹和 experimental 的位置——这两个点出错时没有任何提示，样式就是“凭空消失”，连浏览器 DevTools 的 Styles 面板都找不到对应规则。调试时优先检查这两处，比反复修改断点值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
