Tailwind自定义类在移动端及Chrome DevTools不生效，桌面/Safari正常

核心触发原因是HTML文件缺失移动端必需的viewport元标签。
移动端浏览器（含Chrome DevTools移动调试模式）默认会使用宽度约980px的虚拟布局视口渲染页面，不会匹配设备真实屏幕宽度。而Tailwind默认断点规则为：

• 无断点前缀的样式：所有宽度生效
• sm:前缀：视口宽度≥640px生效
• md:前缀：视口宽度≥768px生效
  980px的默认虚拟视口直接命中md断点的触发条件，因此无论在什么尺寸的移动设备/模拟器上打开页面，都会直接应用md:h-vh70样式，小宽度下的h-vh30、sm:h-vh50规则完全不会触发，和描述的现象完全吻合。

另外配置存在一处非核心错误：autoprefixer属于PostCSS插件，不能写在Tailwind的plugins数组中，该配置写法会导致autoprefixer不生效，虽然不是本次响应式失效的直接原因，但也需要修正。

• 首先在HTML的<head>标签内添加标准viewport配置，强制浏览器使用设备实际宽度作为布局视口，禁止初始缩放：

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

添加完成后，断点匹配逻辑就会和桌面端缩放表现一致：视口宽度<640px时应用h-vh30，640px≤宽度<768px时应用sm:h-vh50，宽度≥768px时应用md:h-vh70。

• 修正Tailwind配置错误，将autoprefixer从tailwind.config.js的plugins数组中移除，放到独立的PostCSS配置文件中。
  修正后的tailwind.config.js参考：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 配置为你项目实际需要扫描的文件路径，例如"./src/**/*.{html,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      height: {
        vh30: "30vh",
        vh50: "50vh",      
        vh70: "70vh",
      },
    },
  },
  plugins: [require("tailwindcss-textshadow")],
};

同目录下新建/修改postcss.config.js配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• 可选优化：iOS Safari对vh单位存在固有兼容问题，会把底部工具栏高度计入视口高度，滚动时vh计算值会跳变，如果需要更稳定的移动端视口高度效果，可以将自定义高度的单位替换为动态视口单位dvh，例如vh30: "30dvh"，该单位已覆盖绝大多数现代移动端浏览器。

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