[v4] @tailwindcss/postcss - transpilation either doesn't work or the output is not the same as with Autoprefixer

[HummingMind]

What version of Tailwind CSS are you using?

4.0.0-beta.2

What build tool (or framework if it abstracts the build tool) are you using?

vite 5.4.11

What version of Node.js are you using?

v22.11.0

What browser are you using?

Chrome 131.0.6778.86

What operating system are you using?

Windows 11 24H2

Describe your issue

When the @tailwindcss/postcss plugin is used, without explicitely using Autoprefixer, the transpilation output is not the same as when autoprefixer is added back in. I tried definiting the browserslist rules via the package.json key or via the .browserslistrc file and both work with autoprefixer, but neither one seems to work with the @tailwindcss/postcss plugin alone.

I am using this to test:

Here are the browserslist rules:

Here is the correct output if I explicitely add Autoprefixer back in:

Here is the output if I remove Autoprefixer, as the new beta docs say:

Thank you!

[adamwathan]

Dug into this one quickly, it looks like we need to explicitly set a target for Firefox and iOS Safari to get Lightning CSS to prefix the text-size-adjust property:

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22firefox%22%3A8781824%2C%22ios_saf%22%3A1048576%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22p%20%7B%5Cn%20%20text-size-adjust%3A%20none%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

Will have to figure out the minimum Chrome version we should target but I know we're only targeting Safari >= 16.4 (for @property) and Firefox >= 128 (also for @property).

Looks like maybe our minimum Chrome version is 111 for color-mix().

[HummingMind]

@adamwathan so it sounds like my browserslist key in package.json is picked up and respected, but this is a Lightning CSS thing (bug)? Otherwise, the last 2 versions rule would have covered those versions numbers.

Thank you! 🍻

[adamwathan]

Nah no bug, we currently ignore your browserslist config because v4 targets pretty modern browsers only because of features like @property and color-mix(…), so if your config says you need to support Safari 14 or something Tailwind v4 just can't even work in that version of Safari.

The main issue is on our end, we currently only explicitly add Safari 16.4 as a browser target but we need to add iOS Safari 16.4 and Firefox 128 as well.

[HummingMind]

Ah, that makes a lot more sense. 😆

Definitely makes sense if a browserslist config targets would be too low for what TW4 relies on.

Hopefully you'll find a way to support more aggressive configs, that would set the tagrets to even newer versions than what you rely on, such as last 2 versions.

I'll keep an eye out on the future beta changelogs.

Thank you! great work on TW4 so far! Loving it. ❤️ 🍻