Tailwind 的断点前缀（如 sm:、md:）表示视口宽度 ≥ 对应像素值的媒体查询，移动优先；sm:hidden 和 lg:block 冲突因 CSS 后写覆盖，正确写法是 block sm:hidden md:block lg:hidden；默认断点为 sm:640px、md:768px、lg:1024px；动态拼接类名会导致响应式失效。
直接说结论：Tailwind 的 sm:、md:、lg: 等前缀不是“针对某类设备”，而是作用于**视口宽度 ≥ 某个像素值**的媒体查询，且默认是移动优先（mobile-first）——没加前缀的类在所有尺寸都生效，带前缀的只在对应及更大断点生效。
为什么 sm:hidden 和 lg:block 一起用会失效
因为 hidden 等价于 display: none，而 CSS 类的顺序决定了权重：后写的类覆盖先写的。写成 hidden sm:block lg:hidden 时，lg:hidden 会在 ≥1024px 下强制隐藏，不管前面有没有 sm:block。
- 错误写法：
hidden sm:block lg:hidden→ lg 下仍被隐藏 - 正确思路：默认可见，只在需要时隐藏；例如仅在中大屏显示 →
sm:block md:hidden lg:block不推荐，逻辑绕；更稳妥的是block sm:hidden md:block lg:hidden（小屏显示，中屏隐藏，大屏再显示） - 最常用模式：让元素「仅在 sm 及以下显示」→ 直接写
block sm:hidden（默认显示，≥640px 隐藏）
sm:、md:、lg: 对应多少像素？别硬背
它们的数值来自 tailwind.config.js 中的 theme.screens，官方默认是：sm: '640px'、md: '768px'、lg: '1024px'、xl: '1280px'、2xl: '1536px'。但项目里只要改过配置，比如把 md 改成 '800px'，那所有 md: 类就从 800px 开始生效。
- 断点不识别设备类型（iPhone / iPad / Chromebook），只看
window.innerWidth -
sm:表示「≥640px」，不是「仅在 sm 尺寸」；所以sm:flex在 lg、xl 下也生效 - 没定义的断点名（如
tablet:text-red-500）完全不会生成对应 CSS
响应式布局常见组合：Flex/Grid + 断点前缀
这类组合最容易踩坑的地方是「以为写了 sm:flex 就能替代 flex」，其实不然——不写基础类，小屏下 Flexbox 根本不启用。
立即学习“前端免费学习笔记（深入）”；
- 移动端列堆叠、桌面端横排：必须写
flex flex-col sm:flex-row（flex启用 Flex，flex-col设为竖排，sm:flex-row在 ≥640px 改为横排） - 卡片网格列数渐进：用
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，注意不能漏掉grid基础类 - 字体大小响应式：推荐
text-base sm:text-lg md:text-xl lg:text-2xl，避免跳变，逐级放大
动态拼接类名时响应式会失效
Tailwind 是静态扫描 HTML 和 JS 中的字符串来生成 CSS 的，像 className={`text-${size} ${isWide ? 'lg:w-1/2' : 'w-full'}`} 这种运行时拼接，lg:w-1/2 不会被识别，最终构建产物里没有这条规则。
- 解决方案一：预先把所有可能的类名写全，用条件判断开关，例如
className={`${isWide ? 'lg:w-1/2' : 'w-full'} w-full`} - 解决方案二：用
style或自定义 CSS 变量兜底，但失去 Tailwind 响应式能力 - 特别注意：JSX 中的模板字符串、Vue 的
:class动态绑定、Svelte 的class:xxx={bool}都存在同样限制
真正容易被忽略的是断点值的可变性——你本地开发时看到的 md: 是 768px，但上线后如果 CI 构建用了另一份 tailwind.config.js，实际生效阈值可能完全不同。上线前务必确认配置一致，别依赖“经验”。
