必须添加，否则响应式类在真机失效；tailwind断点为min-width，需按移动优先顺序书写类名，且父容器须支持重排。
不加 <meta name="viewport"> 标签，所有响应式类在真机上都会失效——不是 Tailwind 有问题，是浏览器默认行为。
必须加的 <meta name="viewport"> 声明
缺了它，sm:、md: 类在手机或模拟器里根本不会触发：页面缩成一团、出现横向滚动条、断点完全失灵。这不是配置问题，是浏览器强制要求。
必须写在 里，且 initial-scale=1.0 不能省略：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
用 Next.js / Nuxt 等框架时，检查是否被自动生成的 viewport 覆盖（比如带了 user-scalable=no）；Vue CLI 或 Vite 项目里也要确认没被插件二次注入冲突版本。
sm: 不生效？先看设备宽度和断点逻辑
Tailwind 的断点是 min-width，不是“等于某宽度才生效”。sm: 对应 ≥640px，md: 是 ≥768px。
- iPhone 13 竖屏（390px）→ 只走无前缀类（移动优先默认样式）
- iPhone 13 横屏（844px）→ 触发
sm:和md:，但不触发lg:（需 ≥1024px） - 调试时别只用 DevTools 的 “Responsive” 模式，要选具体型号（如 “iPhone SE (3rd gen)”），否则宽度不准
如果设计稿明确要求 720px 切换布局，就该改 tailwind.config.js 中的 theme.screens.md，而不是硬套默认值。
类名顺序写错，响应式直接被覆盖
Tailwind 是“后写覆盖前写”，但只在对应断点内生效。写成 md:w-1/2 w-full 是错的——w-full 会覆盖 md:w-1/2 在所有尺寸下的效果。
正确写法必须是移动优先顺序：
-
w-full md:w-1/2：默认占满，≥768px 时收窄为一半 -
flex flex-col sm:flex-row：小屏竖排，≥640px 横排 -
hidden md:block：小屏隐藏，≥768px 显示
常见翻车点：按钮组用 sm:space-y-0 却忘了写 flex-col 基础布局，导致 sm:space-y-0 完全不生效。
栅格与 Flex 混用时的响应式陷阱
Grid 更适合内容结构固定、列数明确的场景（如卡片列表），Flex 更适合线性排列+对齐控制（如导航栏、按钮组）。
示例对比：
- 卡片列表 → 推荐
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3，比嵌套多个flex更稳 - 导航栏 →
flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0，注意sm:space-y-0必须配合sm:flex-row才起作用 - 汉堡菜单 →
hidden md:flex+flex md:hidden，两个类不能写反，否则小屏看不到菜单按钮
最易被忽略的一点：断点类生效的前提是父容器本身能随视口变化而重排——如果外层用了固定宽高或 overflow: hidden，内部响应式类可能视觉上“没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
