Tailwind CSS配置在Google Chrome中失效的问题排查请求

针对你遇到的Firefox正常、Chrome/安卓端自适应失效（仅显示桌面版）的问题，按优先级排查以下几点：

1. 必须添加Viewport Meta标签 #

Chrome移动端对viewport标签的要求非常严格，缺失会直接导致页面按桌面宽度渲染，这是最常见的原因。在HTML的<head>中添加：

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

Firefox可能对缺失标签有容错处理，但Chrome（包括安卓端）不会。

2. 验证Tailwind响应式断点配置 #

检查tailwind.config.js中的screens配置是否正确，默认断点需确保存在：

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

若自定义了断点，确认数值无冲突或语法错误。

3. 清除浏览器缓存 #

部署后Chrome可能缓存了旧的CSS文件，导致响应式样式未加载：

• 桌面端：按Ctrl+Shift+R强制刷新，或在开发者工具中勾选「Disable cache」后重新加载。
• 安卓端：进入浏览器设置，清除缓存和站点数据。

4. 确认Tailwind构建的Content配置 #

确保tailwind.config.js的content字段包含所有使用Tailwind类的文件路径，否则Tailwind会忽略未扫描到的响应式类：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 根据你的项目结构调整
    "./public/index.html"
  ],
}

若路径配置不全，只会生成基础样式，响应式类不会被编译到最终CSS中。

5. 排查样式冲突 #

检查是否有全局CSS或第三方样式覆盖了Tailwind的响应式规则：

• 在Chrome开发者工具的Elements面板中，查看自适应元素的样式，确认lg:flex-row等类是否被其他样式覆盖（划掉的样式表示被覆盖）。
• 避免自定义@media规则与Tailwind的断点范围重叠。

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