tailwind 的响应式前缀是预设媒体查询的原子类，非运行时js判断；自定义断点须在配置中声明，否则不生成css；多断点类互不覆盖，因作用于不同@media范围；混用min/max-width会导致断点空隙或重叠。
为什么 Tailwind 的 sm:、md: 前缀不是“魔法”，而是 CSS 优先级的精确控制
响应式工具类生效的前提，不是框架自动注入媒体查询，而是你写的类名本身已绑定对应断点的 @media 规则。Tailwind 默认生成的 sm:text-lg 实际编译为：
@media (min-width: 640px) { .sm\:text-lg { font-size: 1.125rem; } }
——它本质是预设好的带媒体查询的原子类，而非运行时 JS 判断。
这意味着：如果你自定义断点（比如加一个 xl2），必须同步在 tailwind.config.js 的 theme.screens 中声明，否则 xl2:w-full 不会生成任何 CSS。
- 不要指望浏览器根据视口宽度“猜”出该用哪个类——类名不匹配，样式就不会应用
- 多个断点类同时存在时（如
text-sm md:text-base lg:text-lg），后写的不会覆盖前写的，因为它们作用于不同媒体查询范围 - 调试时直接检查元素计算样式里是否出现对应
@media块，比查 HTML 类名更可靠
PostCSS + autoprefixer 能否替代响应式工具类？
不能。autoprefixer 只补全 CSS 属性前缀（如 -webkit-flex），不生成任何响应式逻辑。它对 @media (max-width: 768px) 这类规则完全无感，也不会帮你把 flex 拆成 sm:flex-row md:flex-col。
真正起作用的是构建时 CSS 工具链的组合：
立即学习“前端免费学习笔记（深入）”；
- Tailwind 或 Bootstrap 的构建插件，在
build阶段扫描源码中所有工具类，按配置生成对应媒体查询的 CSS - PostCSS 是管道载体，autoprefixer 是其中一环，负责兼容性，不负责响应式结构
- 如果你用纯手写 CSS，那
@media必须自己写、自己维护，工具类只是把这部分提前固化了
如何避免 lg:hidden xl:block 这类冲突类名失效？
这类写法看似“覆盖”，实则危险：当屏幕宽度处于 lg 和 xl 之间（比如 1024px），lg:hidden 生效（display: none），而 xl:block 不触发（因未达 xl 断点），结果元素彻底消失。
