How to configure autoprefixer ?

[pixeline]

Hi!
I would like to specify which browser autoprefixer should support.
I added this to the postcss.config.js file (i intentionnally target a low ios version to make it obvious) :

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-nested-ancestors'),
        require('tailwindcss/nesting'),
        require('postcss-extend-rule'),
        require('tailwindcss'),
        require('autoprefixer')
    ],
    autoprefixer: { browsers: ['last 2 versions', 'iOS >= 2'] }
}

.... then relaunched npm run watch-sync, but I don't see any difference in the output, when I run npx autoprefixer --info :

Browsers:
  Chrome for Android: 114
  Firefox for Android: 113
  QQ Browser: 13.1
  UC for Android: 13.4
  Android: 114
  Chrome: 114, 113, 112, 111, 109
  Edge: 114, 113, 112
  Firefox: 113, 112, 102
  iOS Safari: 16.5, 16.4, 16.3, 16.2, 16.1, 16.0, 15.6
  KaiOS Browser: 3.0-3.1, 2.5
  Opera Mini: all
  Opera Mobile: 73
  Opera: 99, 98
  Safari: 16.5, 16.4, 16.3, 15.6
  Samsung Internet: 21, 20

So I guess my configuration setting is not being picked up. Can you help me find out what I'm doing wrong ?

[pixeline]

OK, I should have thought of checking autoprefixer documentation sooner :-)

Simply add a browserslist entry to the package.json

Example:

{
	"name": "apptweak-theme",
	"version": "0.2.0",
	"description": "WordPress theme based on Tailwind CSS.",
	"author": "Alexandre Plennevaux",
	"repository": {
		"type": "git",
		"url": "https://github.com/apptweak/cms"
	},
	"theme_uri": "https://github.com/apptweak/cms",
	"author_uri": "https://www.apptweak.com",
	"text_domain": "apptweak-theme",
	"license": "MIT",
	"scripts": {
		"production:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --minify",
		"production:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login.css -o ./css/login.css --postcss --minify",
		"production:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --minify",
		"production:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --minify",
		"dev:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss",
		"dev:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login.css -o ./css/login.css --postcss",
		"dev:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss",
		"dev:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js",
		"watch:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --watch",
		"watch:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login.css -o ./css/login.css --postcss --watch",
		"watch:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --watch",
		"watch:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --watch",
		"production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:css-login\" \"npm run production:js\"",
		"dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-login\" \"npm run dev:css-editor\" \"npm run dev:js\"",
		"watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:css-login\" \"npm run watch:js\" --stack-trace-limit=0",
		"browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"localhost\" --host=\"localhost\" --files=\"./\" --stack-trace-limit=0",
		"watch-sync": "cross-env NODE_ENV=development concurrently \"npm run browser-sync\" \"npm run watch\""
	},
	"devDependencies": {
		"@jeffreyvr/tailwindcss-tailpress": "^2.0.0",
		"autoprefixer": "^10.4.13",
		"browser-sync": "^2.29.1",
		"concurrently": "^6.2.1",
		"cross-env": "^6.0.3",
		"esbuild": "^0.12.24",
		"postcss": "^8.4.20",
		"postcss-extend-rule": "^4.0.0",
		"postcss-import": "^14.0.0",
		"postcss-nested-ancestors": "^2.0.0",
		"tailwindcss": "^3.2.4"
	},
	"dependencies": {
		"jquery": "^3.6.3"
	},
	"browserslist": [
		"last 20 versions"
	]
}
```