老版Safari浏览器gap属性失效，Tailwind+NextJS下如何兼容？

1. 用postcss-gap-properties插件处理前缀转换 #

旧版Safari（如14及以下版本）不支持标准gap属性，仅识别带前缀的grid-gap等写法。通过postcss-gap-properties插件可自动将标准gap转换为旧版兼容的前缀形式：

• 先安装插件：

npm install postcss-gap-properties --save-dev

• 修改你的postcss.config.js，将插件加入配置（顺序放在tailwindcss之后）：

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-gap-properties': {}, // 新增该插件
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
};

2. Flex布局下的gap兼容方案 #

旧版Safari完全不支持Flex布局的gap属性，仅靠插件无法解决，此时可改用Tailwind内置的space-x-*/space-y-*工具类：

• 水平Flex布局：将gap-x-4替换为space-x-4
• 垂直Flex布局：将gap-y-4替换为space-y-4

这类工具类通过子元素margin+容器负margin的方式模拟gap效果，完全兼容旧版Safari。

3. 验证效果 #

修改配置和代码后重新构建项目，在旧版Safari中测试布局，确认gap效果正常显示。

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