Tailwind在375px屏幕宽度下错误触发md断点样式问题

问题表现 #

• 预期效果：移动端场景下目标div默认使用h-4/5高度类，仅屏幕宽度达到md断点阈值时才应用md:h-3/5
• 实际异常：屏幕宽度为375px的移动设备上，md:h-3/5样式被错误触发，覆盖了默认高度
• 问题截图：
  
  
  

排查&修复方案 #

1. 优先检查HTML视口标签配置 #

90%以上的这类移动端断点异常都是因为没加标准viewport meta标签。
移动端浏览器如果没检测到正确的viewport声明，会默认用980px宽度的虚拟视口渲染页面，此时页面的CSS渲染宽度会超过Tailwind md断点默认的768px阈值，自然会触发md:前缀的样式。
直接在HTML的<head>里加下面这行标签即可修复：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

加完之后移动端会按设备实际CSS宽度匹配断点，375px宽度下不会触发md断点样式。

2. 检查Tailwind断点自定义配置 #

如果已经加了viewport标签，打开项目根目录的tailwind.config.js，检查screens配置项：
Tailwind默认md断点阈值是768px，如果之前自定义配置把md值改成了小于等于375px，就会导致375px屏幕下触发md样式，把值改回预期阈值即可。
默认断点配置参考：

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px', // 确认这个值没有被改小
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    }
  }
}

3. 排查样式优先级冲突 #

如果前两项都没问题，打开浏览器开发者工具，选中出问题的div元素，在样式面板里追踪h-3/5对应的样式来源：
如果不是Tailwind的md媒体查询下的规则，说明是其他全局CSS、内联样式、或者带更高权重选择器的样式冲突导致的，定位到冲突规则调整优先级/删除冗余代码即可。

内容的提问来源于stack exchange，提问作者Zdubya