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.
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": {
"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 .