必须通过插件 @tailwindcss/container-queries 启用容器断点，配置在 tailwind.config.js 根层级的 containerqueries 对象中，键名如 md 对应类名 @md，值为带单位字符串，且父容器需有 container 类和 container-type 属性。
tailwind.config.js 里怎么加容器断点（不是视口断点）
容器查询（Container Queries）和视口断点（screens）是两套独立系统，不能混用。Tailwind 默认不提供容器断点，必须通过插件 @tailwindcss/container-queries 启用。它不读取 theme.screens，而是自己维护一套 @container (min-width: ...) 规则。
常见错误是试图在 theme.extend.screens 里写 container-sm: '30rem'——这完全无效，生成的 CSS 里不会出现任何 @container 块。
- 安装插件：
npm install @tailwindcss/container-queries - 在
tailwind.config.js的plugins数组中加入：require('@tailwindcss/container-queries') - 插件默认就注册了
@xs到@7xl共 11 个容器断点，无需额外配置即可直接使用，例如：@sm:grid-cols-2 - 若需自定义值（如把
@md改成36rem），必须在插件配置项中显式传入对象，不能靠extend.screens
@container 断点怎么自定义数值
插件支持通过 containerQueries 配置项覆盖默认断点，但这个配置项**必须放在 tailwind.config.js 根层级**，不是 theme 下。格式是纯对象，键名就是你在类名里用的前缀（如 @sm），值是带单位的字符串或数字（单位默认为 rem）。
例如，想让 @md 对应 @container (min-width: 40rem)，且新增一个 @desktop：
module.exports = {
containerQueries: {
md: '40rem',
desktop: '56rem'
},
plugins: [
require('@tailwindcss/container-queries')
]
}
- 键名不能含
@符号，类名中才加（即配置写md，使用时写@md:grid-cols-3） - 值推荐用
rem（插件默认按rem解析），px也可用但需注意与根字体大小的换算一致性 - 未在
containerQueries中声明的断点（如@xs、@lg）仍沿用插件默认值，不会丢失 - 修改后必须重启开发服务器——插件配置是编译时读取，热更新不生效
@sm:grid-cols-2 不生效的三个关键原因
容器查询类不像视口类那样“全局生效”，它依赖两个硬性前提：父容器必须有 container 类 + 显式设置 container-type CSS 属性。漏掉任一环，@sm: 这类前缀就完全不触发。
- 父容器没加
container类：必须手动写，比如<div class="container @sm:grid-cols-2"> —— 注意不是自动继承 <li>没设 <code>container-type：Tailwind 不会自动加该属性，得在 CSS 或内联样式里补上，例如：style="container-type: inline-size;"或在src/index.css里写：.container { container-type: inline-size; } - PurgeCSS 剔除了未使用的类：如果模板中只写了
@sm:grid-cols-2却没在任何地方出现container类，插件可能跳过生成对应媒体查询块；确保两者同时存在 - 调试时别用 DevTools 强制添加类：容器查询依赖真实 DOM 容器尺寸计算，手动加类不会触发重排，必须刷新或 resize 父容器
- 语法冲突：你写
screens: { '@sm': '32rem' }，Tailwind 会尝试生成@media (min-width: 32rem)，但 CSS 不认这种写法，直接忽略整条规则 - 语义错位：
@sm在容器查询中代表“当容器宽度 ≥32rem”，而在视口断点中代表“当视口宽度 ≥768px”——二者物理意义、触发时机、适用场景毫无关系 - v4 版本更彻底：JS 配置文件已废弃，
screens彻底移除，所有断点改用@theme变量，但容器查询插件仍走自己的配置路径，不兼容这套新机制
为什么不能用 screens 配置容器断点
screens 只控制 @media (min-width: ...)，而容器查询是 @container (min-width: ...)，底层机制完全不同。浏览器解析时，前者查视口宽度，后者查最近的、设置了 container-type 的祖先元素宽度。
试图复用 screens 配置会导致两类问题：
真正容易被忽略的是：容器断点生效的前提是父容器真实具备可测量的宽度。Flex/Grid 子项、display: contents 元素、或未设置 width/min-width 的空容器，都可能让 @container 查询返回 0px，导致所有容器类失效——这不是配置问题，是布局结构本身不满足容器查询条件。
