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 才居中”，小屏（

解决办法很简单：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 先写基础样式：比如 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 的旧逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！