iOS 11 Safari网格gap兼容问题：Tailwind+postcss-preset-env未转grid-gap

我在项目中使用Tailwind，需要保持对iOS 11 Safari的向后兼容性。使用Grid布局时出现问题：postcss-preset-env插件未将CSS的gap属性转换为grid-gap。我正通过PostCSS CLI运行postcss，以下是我的配置和依赖版本：

postcss.config.js 配置 #

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');
const cssnano = require('cssnano');

module.exports = {
    plugins: [
        require('postcss-import'),
        tailwindcss('./tailwind.config.js'),
        postcssPresetEnv({
            browsers: 'defaults, iOS >= 11',
            preserve: false,
            features: {
                "gap-properties": true
            }
        }),
        cssnano({preset: 'default'})
    ]
}

开发依赖版本 #

"cssnano": "^6.0.1",
"postcss-cli": "^10.1.0",
"postcss-import": "^15.1.0",
"postcss-preset-env": "^8.4.1",
"tailwindcss": "^3.3.2"

解决方案 #

• 修正browsers配置格式：将字符串形式改为数组，确保browserslist正确解析规则：

  browsers: ["defaults", "iOS >= 11"]
  

• 强制启用特性阶段：在postcss-preset-env配置中添加stage: 0，确保gap-properties特性被触发：

  postcssPresetEnv({
      browsers: ["defaults", "iOS >= 11"],
      preserve: false,
      stage: 0,
      features: {
          "gap-properties": true
      }
  })
  

• 验证编译后的CSS：先移除cssnano插件，检查编译后的CSS是否生成grid-gap属性，确认postcss-preset-env是否生效。
• 降级postcss-preset-env：v8.x版本对gap-properties的处理逻辑有调整，尝试降级到v7.x版本重新测试转换效果。

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