@tailwindcss/container-queries需手动安装并配置：执行npm install -d @tailwindcss/container-queries，再在tailwind.config.js的plugins中添加require('@tailwindcss/container-queries')，html中用@container标记容器且父元素须有明确尺寸限制。
@container 类不会默认生效，必须显式安装并启用 @tailwindcss/container-queries 插件。Tailwind CSS 本身（包括 v4）不内置容器查询支持，它始终是独立插件。
npm 安装命令必须带 -D 标志
运行以下命令（不是 npm install @tailwindcss/container-queries，漏掉 -D 会导致插件未被识别为开发依赖，后续配置可能静默失败）：
npm install -D @tailwindcss/container-queries
- 若使用 pnpm：用
pnpm add -D @tailwindcss/container-queries - 若使用 yarn：用
yarn add -D @tailwindcss/container-queries - Django Tailwind 用户应优先走
python manage.py tailwind plugin_install @tailwindcss/container-queries，它会自动处理 npm 安装和styles.css注入
tailwind.config.js 中 plugins 数组必须包含 require()
仅安装包不够，必须在配置中显式引入。常见错误是写成字符串 '@tailwindcss/container-queries' 或漏掉 require()：
module.exports = {
// ...
plugins: [
require('@tailwindcss/container-queries'), // ✅ 正确
// require('@tailwindcss/forms'), // 其他插件可并列
],
}
- 如果项目用 TypeScript 写配置（如
tailwind.config.ts），需确保已安装@types/node，否则require可能报错 - Vite +
@tailwindcss/vite用户也仍需在此处加require()—— Vite 插件只接管构建流程，不替代 Tailwind 的插件注册机制
HTML 中启用容器需同时满足两个条件
光写 <div class="@container"> 不够，必须：
<ul>
<li>父元素有明确的尺寸限制（比如设了 <code>width、max-width，或被 flex/grid 容器约束）
container-type: inline-size —— 而 @container 工具类正是为此生成的所以正确写法是：
<div class="w-80">
<div class="@container">
<p class="@md:font-bold">当此 div 宽度 ≥ 40rem 时加粗</p>
</div>
</div>
若外层没尺寸约束，浏览器无法计算“容器宽度”，@md: 等断点将永不触发。
调试时注意浏览器兼容性与 devtools 显示
容器查询目前仅在 Chromium 117+、Firefox 119+、Safari 17.4+ 原生支持。开发时容易忽略这点：
- 在不支持的浏览器中，
@container规则会被完全忽略，无报错、无警告 - Chrome DevTools 的 Styles 面板里，
@container相关规则默认折叠，需手动展开“Container queries”小箭头才能看到是否命中 - 若用
container-name（如@container/my-card），务必确认命名唯一，重复名会导致后定义的覆盖前定义的
最常被跳过的一步：改完 tailwind.config.js 后没重启构建进程 —— Tailwind CLI 或 Vite/HMR 不会自动监听插件数组变化，必须手动重启。
