TailwindCSS媒体断点在Safari中失效，Chrome正常，求排查方案

常见问题及解决步骤 #

1. 检查视口Meta标签 #

Safari对响应式布局依赖度极高，若HTML头部缺少正确的视口配置，媒体断点会直接失效。确保在<head>中添加：

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

2. 验证Tailwind断点配置 #

打开tailwind.config.js，确认断点定义未被误修改。默认md断点对应768px，若被自定义调整（比如改成md: '992px'），测试时需匹配对应宽度才会触发样式。示例默认配置：

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
}

3. 排查CSS优先级冲突 #

在Safari开发者工具（Cmd+Opt+I）中查看侧边栏元素的样式面板，检查md:min-w-64、md:max-w-64是否被划掉。若存在更高优先级的样式（比如带!important的自定义CSS、更具体的选择器），需调整样式权重或移除冲突规则。

4. 解决Flex布局的潜在干扰 #

你的代码中，侧边栏在flex容器内可能被flex-shrink默认值（1）压缩，导致min-width不生效。给侧边栏添加flex-shrink-0固定宽度，避免被挤压：

<div className="flex flex-row">
  <div className="min-w-16 max-w-16 md:min-w-64 md:max-w-64 flex-shrink-0">
    {...side navbar content}
  </div>
  <div className="flex-1">
    {...other content}
  </div>
</div>

5. 清除Safari缓存 #

Safari常缓存旧CSS资源，导致新样式不生效。执行强制刷新（Cmd+Shift+R），或进入设置清除浏览器缓存后重新测试。

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