移动端Tailwind样式失效主因是tailwind.config.js的content路径未配全，导致断点类未生成；hidden与invisible混用引发布局错乱；动态拼接类名被Purge误删；断点值未按设计系统对齐。
移动端 Tailwind 样式失效，八成是 tailwind.config.js 的 content 没配全，不是框架问题，是扫描漏了。
tailwind.config.js 的 content 路径漏配导致断点类不生成
你在 src/components/Navbar.tsx 里写了 md:hidden lg:block，但 content 只写了 ["./public/**/*.html"]——Tailwind 根本不会去 JS/TSX 文件里找类名，md: 类直接不进最终 CSS，手机上导航栏永远显示或永远隐藏。
- 必须把所有含 Tailwind 类的源码路径加进去，例如：
["./src/**/*.{js,jsx,ts,tsx}"] - 用 Expo 或 React Native Web？还得加上
["./app/**/*.{js,jsx,ts,tsx}"] - 用 Astro、Svelte 或动态生成的组件？对应扩展名（如
.astro、.svelte）也得显式列出来 - 漏掉一类文件，对应断点下的所有类（
sm:flex、lg:gap-6等）就全失效
hidden 和 invisible 混用导致布局错乱
移动端空间紧张，常靠显隐控制元素。但 hidden 是 display: none，会彻底脱离文档流；而 invisible 是 visibility: hidden，仍占位。选错一个，折叠菜单高度塌陷、表单对齐偏移、滚动条跳动都会发生。
- 需要“视觉隐藏但保留占位”（比如为无障碍留空、防止布局抖动）：用
invisible - 需要“完全移除、腾出空间”（比如侧边栏收起、条件渲染的提示条）：用
hidden - 别在响应式中混用：比如
hidden md:invisible逻辑矛盾，实际效果取决于最后生效的规则
动态拼接类名在构建时被 Purge 移除
像 className={`p-${size === 'lg' ? 6 : 4} ${isDisabled ? 'opacity-50' : 'hover:opacity-90'}`} 这种写法，JIT 引擎无法静态分析字符串内容，p-6、hover:opacity-90 就不会进生产 CSS，手机上 padding 不对、悬停无效。
- 优先用条件对象写法：
className={clsx('p-4', { 'p-6': size === 'lg', 'opacity-50': isDisabled })} - 若必须字符串拼接，把完整类名列在
content的白名单中（不推荐） - 更稳妥的替代：抽成独立组件，用 props 控制类名组合，让 JIT 能识别静态路径
移动端断点值没按设计系统对齐
Tailwind 默认 md: 是 768px，但你的设计稿切图基于 iPhone SE（375px）、iPad Pro（1024px）或安卓折叠屏（720px），硬套默认断点会导致按钮在小屏被截、卡片在中屏堆叠错乱。
- 在
tailwind.config.js的theme.screens中重定义断点：md: '480px'或tablet: '720px' - 避免用像素值硬编码，改用语义名（
sm、tablet、desktop），方便后续统一调整 - 断点叠加要小心：比如
sm:flex md:hidden lg:flex在 480–719px 区间会同时满足sm:和md:，后者覆盖前者，结果是 flex + hidden —— 实际表现可能和预期相反
真正卡住人的从来不是“怎么写”，而是“为什么没生效”。Tailwind 的原子性让它对工程配置极度敏感，content 扫描、JIT 分析、断点触发机制这三环只要断一环，移动端样式就悄无声息地崩掉——而且往往只在真机或特定尺寸下才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
