Tailwind CSS v3.4不原生支持Container Queries，需手动安装@tailwindcss/container-queries插件并在PostCSS中注册，且必须显式设置container-type: inline-size等才能生效，@container规则仅作用于直系子元素。
Container Queries在Tailwind中根本不存在原生支持
截至Tailwind CSS v3.4，@container规则和container属性仍需手动启用，官方并未内置Container Queries插件。所谓“Tailwind的Container Queries插件”是误解——它实际依赖PostCSS插件@tailwindcss/container-queries，且仅提供CSS容器查询语法的自动转换，不生成任何额外工具类。
必须手动添加PostCSS插件并配置容器
直接在tailwind.config.js里加containerQueries: true无效。正确路径是：
- 安装插件：
npm install @tailwindcss/container-queries - 在
postcss.config.js中注册：@tailwindcss/container-queries（顺序必须在tailwindcss之后） - 为需要响应的元素显式设置
container-type，例如：container-type: inline-size;或用类[@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)配合container类 - Tailwind不提供
container-sm这类响应式类；所有断点必须写在@container块内，如@container (min-width: 400px) { ... }
不能混用max-width类与容器查询逻辑
常见错误：给父容器同时加max-w-md和container类，以为能触发查询——但container类默认只设container-type: normal，而normal类型不支持尺寸条件判断。必须显式指定container-type: inline-size（推荐）或size，否则@container (min-width: ...)永不匹配。
实操建议：
- 用
container-inline类（需自定义）替代默认container，其CSS为container-type: inline-size; - 避免在容器上叠加
max-w-类，它们会限制容器宽度，导致查询断点失效 - 调试时用浏览器开发者工具检查元素computed面板中的
container type是否为inline-size
样式作用域极易被忽略：子元素无法继承容器上下文
@container规则只对**直系子元素**生效，嵌套更深的组件不会自动获得该容器的查询上下文。比如div.container > div.card > div.title中，title无法响应card的尺寸变化——除非card自身也声明了container-type。
这意味着：
- 每个需要独立响应的嵌套区块都得单独设
container-type - 不能指望一个顶层
container控制整棵DOM树 - 与媒体查询相比，容器查询的样式作用域更窄、更“局部”，这是设计使然，不是bug
真正麻烦的是：当多个容器嵌套时，最内层的@container规则优先级并不自动更高，需靠选择器权重或!important干预——这点常被文档轻描淡写带过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
