md、lg等前缀对应宽度由tailwind.config.js中theme.screens配置决定，默认md为768px（≥768px生效），断点间无重叠，lg覆盖md；无内置max-width类，需用hidden md:block等反向逻辑实现小屏专用样式。
md、lg这些前缀到底对应多宽？
它们不是固定像素值，而是由 Tailwind 配置文件里 theme.screens 决定的断点阈值，默认是 min-width 媒体查询。比如 md 默认对应 768px，意思是「屏幕宽度 ≥ 768px 时才生效」。
- 实际值可能被项目自定义覆盖，别硬背 768/1024/1280，先查
tailwind.config.js里的screens配置 - 断点之间无边界重叠：如果
md:col-6和lg:col-4同时写在同一个元素上，在 1024px 宽度下只有lg:col-4生效（因为 lg 覆盖 md） - 断点名本身不带单位，但配置里必须带单位（如
'md': '768px'），写成'md': 768会失效
怎么让某个样式只在「小屏」生效，其他屏禁用？
Tailwind 没有内置的 “max-width” 断点类，不能直接写 max-md:hidden。得靠组合或反向逻辑来实现。
- 最稳做法：默认写基础样式（如移动端），再用断点覆盖更大屏——
hidden md:block表示「小屏隐藏，≥md 显示」 - 如果必须从大屏往小屏控制，可用
max-w-screen-md这类工具类配合hidden，但它是基于容器宽度，不是视口，容易误判 - 千万别写
sm:hidden md:block lg:block——冗余且难维护，断点多了极易漏掉某一级
为什么加了 lg:text-xl 在笔记本上看没反应？
常见原因是浏览器缩放、设备像素比或开发工具模拟器没切对 viewport。但更多时候，是 CSS 层叠或断点未命中导致的「看似没生效」。
- 检查浏览器 DevTools 的「Computed」面板，看
font-size是否被更高优先级规则覆盖（比如组件库的!important） - 确认当前视口宽度 ≥
lg阈值（默认 1024px），用window.innerWidth控制台敲一下最准 - 如果你在 iframe 或嵌入式环境里调试，
matchMedia可能读不到真实视口，此时断点会失效 - Next.js / Vite 等 SSR 环境下，服务端渲染时没有 window，断点类不会被注入——首次加载可能闪动或错乱，这是正常行为
自定义断点后，旧项目里所有 xl 类突然不工作了？
不是不工作，是 xl 这个名字还在，但它的含义变了。Tailwind 不校验你删没删某个断点名，只按配置顺序生成媒体查询。
- 如果你把
xl从配置里删了，但模板中还留着xl:flex，它不会报错，只是对应规则压根没生成，CSS 文件里找不到这条样式 - 新增断点如
2xl后，记得同步更新theme.extend.screens，而不是只改screens——否则旧断点会被完全替换 - 用
@layer utilities手动加响应式工具类时，别用@screen xl，而要用实际值如@media (min-width: 1280px)，避免和配置脱钩
断点系统看着简单，真正卡住人的永远是「它在哪儿生效」和「它为什么没生效」这两件事。配置、环境、层叠、缩放——四个变量只要一个不对，就白调十分钟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
