TailwindCSS Autoprefixer not working | flex

Question

Hi I used tailwind in my react project but when I build the project, the autoprefixer doesn't work properly

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    container: {
      center: true,
      padding: "1rem",
    },
    extend: {},
    },
  },
  plugins: [
     require('autoprefixer')
  ]
};

I wanna autoprefixer work for every flex property like:

.flex{
    display: flex;
}

to

.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

browserslist package.json:

{
  ....

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

  ...
}

I want all flex properties to work in all browsers, because, for example, on an old phone in the Safari browser, the gap property does not work correctly.

Answer 1

First, you need install PostCSS and setup like here:

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel. Tailwind documentation

And second step, reduce the percentage of support from >0.2% to >0.01% in both enviroments.

browserslist package.json:

{
  ....

  "browserslist": {
    "production": [
      ">0.01%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.01%",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

  ...
}

Finnaly, you can remove the autoprefixer plugin from tailwind.config.js .