安装 @tailwindcss/container-queries 必须加 -d，否则静默失败；配置需用 require() 而非字符串；父容器必须添加 @container 类才能触发查询；断点基于容器尺寸，使用 @sm: 等专用变体。

安装 @tailwindcss/container-queries 必须加 -D

不带 -D 会静默失败，插件不会被识别为开发依赖，后续配置看起来正常但实际不生效。npm、pnpm、yarn 命令必须明确指定开发依赖标志：

• npm install -D @tailwindcss/container-queries
• pnpm add -D @tailwindcss/container-queries
• yarn add -D @tailwindcss/container-queries

Django Tailwind 用户例外：应运行 python manage.py tailwind plugin_install @tailwindcss/container-queries，它会自动处理安装与 CSS 注入。

tailwind.config.js 中 plugins 必须用 require()，不能写字符串

常见错误是把插件写成字符串或漏掉 require()，导致插件加载失败且无报错。正确写法只有一种：

module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'), // ✅
    // require('@tailwindcss/forms'), // 其他插件可并列
  ],
}

若使用 TypeScript 配置（如 tailwind.config.ts），需确保已安装 @types/node，否则 require 可能类型报错。

注意：experimental: { containerQueries: true } 是过时写法，v3.4+ 不再需要，也无效。

@container 类不是装饰类，而是触发容器查询的必需标记

容器查询不监听视口，而是监听**最近的、带 @container 类的祖先元素**。这个类不是可选样式修饰符，而是功能开关：

• 必须显式加在父容器上：<div class="@container">...</div>
• 子元素才能使用 @sm:、@lg: 等变体，例如：<div class="@lg:underline">文本</div>
• 默认容器类型是 inline-size（即宽度），无需额外写 container-type: inline-size
• @container 规则仅作用于直系子元素，嵌套更深的后代不响应

没有 @container 类，所有 @sm: 类都会被忽略——不是报错，是彻底不生成对应 CSS。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

断点是容器尺寸，不是视口尺寸，且不能混用媒体查询语法

容器查询断点基于父容器宽度，和 sm、md 等屏幕断点无关。插件默认提供 @xs 到 @7xl 共 11 个预设，对应 min-width 值（如 @lg = @container (min-width: 32rem)）。

你不能这样写：

@media (min-width: 768px) { /* 错误：这是媒体查询，不是容器查询 */ }

也不能这样写：

<div class="md:text-lg">...</div> /* 错误：md 是屏幕断点，对容器无效 */

必须用容器专用变体：@md:text-lg、@2xl:font-bold，且仅当父级有 @container 时才生效。

自定义值也支持，比如 @[17.5rem]:text-sm，但注意括号必须是英文方括号，且单位要合法。

最容易被忽略的一点：容器本身要有明确尺寸限制。如果 @container 元素是 display: inline 或未设置宽高/约束（如 flex 子项未设 flex-shrink: 0），它的“尺寸”可能为 0 或不可预测，导致容器查询始终不触发。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！