macOS Big Sur Safari14.1下Tailwind Browserslist不生效如何解决

你当前配置的核心问题是仅配置了browserslist和autoprefixer，没有覆盖Tailwind本身输出语法、CSS新特性转译、Safari特有bug的适配，按以下步骤逐一排查修复即可：

• 修正browserslist配置并清缓存
  你当前写的Safari > 10.1范围太宽泛，部分适配规则会漏过Safari 14版本的特殊处理，直接明确目标版本范围：

  "browserslist": [
    "Chrome >= 61",
    "Edge >= 16",
    "Firefox >= 60",
    "Safari >= 14"
  ]
  

  改完配置后必须删除项目下的.cache目录、node_modules/.cache目录，重启构建流程，browserslist配置改动后不删缓存不会生效。
• 补全PostCSS适配插件链
  Tailwind本身只会输出基础CSS语法，不会自动转译低版本浏览器不支持的新特性，你需要安装postcss-preset-env补全转译能力，标准的postcss.config.js配置如下：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {
        // 明确给webkit内核浏览器加前缀
        overrideBrowserslist: ["last 2 versions", "Safari >=14"]
      },
      'postcss-preset-env': {
        stage: 2,
        features: {
          // 适配Safari14 flex布局下gap属性不生效的问题
          'gap-properties': { flexGapNotSupported: 'flex' },
          // 自动补全backdrop-filter的webkit前缀
          'backdrop-filter': true,
          // 关闭存在兼容问题的逻辑属性转译
          'logical-properties-and-values': false
        }
      }
    }
  }
  

• 修正Tailwind配置适配Safari选择器bug
  Safari 14对CSS:where()选择器的优先级计算存在已知bug，而Tailwind默认会用:where()生成低权重的默认样式，直接在tailwind.config.js中关闭该特性：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    // 你原有的content、theme等配置保留
    target: 'browserslist',
    experimental: {
      optimizeUniversalDefaults: true
    }
  }
  

• 针对性处理高频失效类
  以下几类Tailwind工具类在Safari14下有特殊兼容要求，按需补全全局样式即可：
  • 粘性定位类sticky：需要补全webkit前缀，在全局CSS中添加：

    .sticky {
      position: -webkit-sticky;
      position: sticky;
    }
    

  • 宽高比类aspect-*：Safari14原生不支持aspect-ratio属性，要么引入对应CSS polyfill，要么改用padding-top百分比hack实现同等效果
  • 滤镜/backdrop滤镜类：确认autoprefixer版本 >=10.4.0，低版本不会自动补全这类属性的webkit前缀
• 注意不要使用Tailwind浏览器端CDN脚本上生产，CDN版本默认只适配最新版现代浏览器，不会输出低版本兼容代码，所有生产环境代码必须走本地PostCSS构建流程。

内容的提问来源于stack exchange，提问作者M. Aziz Sige Kurniawan