用途：在 Tailwind CSS 中构建响应式布局时，判断该用视口断点还是容器查询，并正确书写对应类名。
主要能力：区分两套独立系统——视口断点按浏览器窗口尺寸改变布局，容器查询按特定父容器尺寸改变布局。给出默认视口断点（sm 40rem/640px、md 48rem/768px、lg 64rem/1024px、xl 80rem/1280px、2xl 96rem/1536px），v4 输出 @media (width >= 40rem) 现代范围语法，v3 输出 min-width，运行时等价。强调移动优先：无前缀类作用于所有尺寸，带前缀类从该断点向上生效；sm:text-center 并非“仅小屏”，仅小屏需用 max-sm:。支持 max-* 范围定位（v3.4 引入，v4 保留），可与 min 变体叠加锁定单一区间，如 md:max-lg:flex。支持任意断点 min-[400px]:flex、max-[600px]:hidden，以及自定义断点：v3 用 theme.screens（定义会替换默认，扩展需用 extend），v4 用 @theme 的 --breakpoint-，移除默认写 --breakpoint-2xl: initial，全部重置写 --breakpoint-: initial，并建议统一用 rem。
容器查询：v3 需安装 npm install -D @tailwindcss/container-queries 并加入 plugins，否则 @container 与 @sm:flex 不生成 CSS；v4 内置，只需 @import "tailwindcss"，不应再装插件。父级加 @container，子级用 @sm、@md 等响应容器尺寸；v4 内置 13 档（@3xs 16rem 至 @7xl 80rem），v3 插件档位较少。支持 @max-md、区间叠加 @sm:@max-md、命名容器 @container/sidebar 与 @md/sidebar:、任意尺寸 @min-[475px]:，以及 v4 的 cqw/cqi/cqh/cqb 长度单位（块方向需父级 @container-size）。
使用方式：可复用组件（卡片、侧栏、导航项）优先容器查询，页面级布局（网格模板、头部高度）用视口断点，两者可用冒号组合。
限制与迁移：v3 转 v4 需从 devDependencies 移除插件并从 plugins 数组删除 require，已有 @container 与 @sm: 用法无需改动；v4 中保留插件会产生静默的顺序异常。不要在 v4 混用 rem 与 px，不要在无 @container-size 时使用 cqb/cqh。具体项目配置与版本细节以官方文档为准。