Tailwind CSS v4原生支持容器查询，需满足三条件：使用v4.0+版本、容器元素显式设置container-type工具类（如container-type-inline-size）、@container规则必须置于@layer components或utilities等块内，缺一即静默失效。
Tailwind CSS v4 已原生支持容器查询，不再需要额外插件或 experimental 标志——但必须用对方式，否则 @container 规则会完全静默失效。
确认你用的是 v4.0+ 且没混用旧配置
v4 的容器查询是内置能力，不是靠 @tailwindcss/container-queries 插件。如果你还在 tailwind.config.js 里 require('@tailwindcss/container-queries')，或者设置了 experimental.containerQueries: true，反而会干扰原生逻辑，导致规则不解析。
- v4 不再读取
experimental配置项，该字段被忽略 -
plugins数组里删掉所有容器查询相关require - 检查实际安装版本：
npm list tailwindcss，确保输出是^4.0.0或更高（如4.3.3） - 旧项目升级后，清空
node_modules/.cache和构建产物，避免残留 PostCSS 缓存
容器元素必须显式声明 container-type
v4 不再提供 @container 工具类，也不再自动给带 container 类的元素加 container-type。你得手动用工具类指定类型，最常用的是 container-type-inline-size。
- 只写
class="container"没用，它只是个普通类名，和容器查询无关 - 正确写法：
class="container-type-inline-size"（对应container-type: inline-size） - 若需监听宽高变化，可用
container-type-size；监听高度用container-type-block-size，但慎用——浏览器对高度变化重排开销大，且很多容器高度由内容撑开，不稳定 - DevTools 的 Computed 面板里查不到
container-type？说明工具类没生效，或被其他样式覆盖（比如display: contents会破坏容器上下文）
@container 规则必须放在 @layer 块内
v4 要求所有自定义 @container 查询规则必须包裹在 @layer components、@layer utilities 或 @layer base 中，否则会被忽略。
- 错误写法：
@container (min-width: 400px) { .card { padding: 1.5rem; } }（顶层直接写，不生效） - 正确写法：
@layer components { @container (min-width: 400px) { .card { padding: 1.5rem; } } } - 命名容器也一样：
@container card (min-width: 400px)必须在@layer内 - 命名容器需配合 HTML 中的
container-name工具类，例如class="container-type-inline-size container-name-card"
变体语法：用 @sm 这类前缀时要注意作用域
v4 支持在容器查询中使用响应式前缀（如 @sm），但它绑定的是你定义的容器，不是视口——这意味着你得先有容器上下文，前缀才有效。
-
@sm:grid-cols-2这种写法默认仍走视口断点，不是容器查询 - 要让
@sm响应容器宽度，必须先定义容器名称，并在类名中显式引用：@sm/card:grid-cols-2（前提是容器有container-name-card） - 命名必须是合法标识符：不能含空格、斜杠、点；重复命名会覆盖，建议用语义化短名如
card、sidebar - 别指望
@sm自动识别任意容器——v4 不做隐式推导，没container-name就没命名空间，变体语法就无从绑定
最容易被忽略的其实是容器本身的尺寸计算：哪怕所有配置都对，如果父容器最终渲染宽度小于查询条件（比如 min-width: 400px），@container 规则依然不会触发。调试时务必用 DevTools 的 Layout 面板确认“Container”标签是否出现，以及 computed width 是否达标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
