Tailwind响应式前缀对应视口最小宽度，由tailwind.config.js的theme.screens决定，默认为sm:≥640px、md:≥768px、lg:≥1024px、xl:≥1280px、2xl:≥1536px，移动优先，带前缀类仅在对应及更大断点生效。
Tailwind 的响应式设计不是靠手写媒体查询，而是靠类名前缀自动触发编译时生成对应 @media 规则。只要用对前缀、顺序和配置，就能让样式在目标断点精准生效。
sm: / md: / lg: 这些前缀到底对应多少像素？
它们不绑定设备类型，只对应视口宽度（viewport width），具体数值由 tailwind.config.js 中的 theme.screens 决定。默认是：
-
sm: ≥640px（比如 iPhone SE 竖屏） -
md: ≥768px（常见平板竖屏） -
lg: ≥1024px（iPad 横屏或小笔记本） -
xl: ≥1280px，2xl: ≥1536px
但项目里改过配置就得按新值来——比如把 md 改成 'md': '800px'，那所有 md: 类就从 800px 开始生效，硬背 768 没意义。
为什么 md:text-center 在小屏没效果，但加了 sm:text-center 就行？
因为 Tailwind 是移动优先，无前缀类（如 text-center）默认在所有尺寸生效；而带前缀的类只在对应断点及更大尺寸生效。md:text-center 表示“≥768px 才居中”，小屏（
立即学习“前端免费学习笔记（深入）”；
解决办法很简单：
- 先写基础样式：比如
text-left（小屏左对齐） - 再叠加断点样式：比如
md:text-center lg:text-right - 别指望
md:覆盖小屏行为——它根本不参与小屏渲染
hidden md:block lg:hidden 为什么有时不生效？
这不是 bug，是 CSS 层叠和 Tailwind 类优先级共同作用的结果。关键点：
-
hidden等价于display: none，且类名越靠后权重越高 - 如果写成
md:block hidden lg:hidden，最后的hidden会锁死所有尺寸 - 正确顺序必须是逻辑递进：
hidden md:block lg:hidden（默认隐藏 → md 显示 → lg 再隐藏） - 断点之间无自动衔接：没声明
xl:，那在 ≥1280px 下仍沿用lg:hidden的规则
自定义断点或改了 screens 配置后，哪些地方最容易出错？
最常被忽略的是断点名与配置的严格一致性。比如：
- 在 HTML 里写了
tablet:text-red-500，但tailwind.config.js里没定义tablet，这个类就完全不会生成 CSS - 自定义断点顺序错乱，比如
{ sm: '640px', tablet: '900px', md: '768px' }，会导致 768–900px 区间变成“真空”，样式意外丢失 - 配置里单位漏写，比如写成
'md': 768而不是'md': '768px'，JIT 编译器直接忽略该断点
真正麻烦的不是写错类，而是改了配置却没同步检查所有用到断点的地方——尤其是那些写死像素值做 fallback 的旧逻辑。
