mask utils are missing -webkit prefix for older chrome versions < 120

[delphi-sucks]

What version of Tailwind CSS are you using?

v4.1.14

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

cli

What browser are you using?

Chrome v113

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/3NrT7SA335

Describe your issue

Many mask-... utils are not supported in older versions of Chrome (< 120).
Tailwind officially supports Chrome starting from version 111 (Browser Support).

The Problem is, that the following utils are missing the -webkit- prefix:

• mask-clip
• mask-image
• mask-origin
• mask-position
• mask-repeat
• mask-size

The following utils aren't even supported until Chrome 120:

• mask-composite
• mask-mode

[wongjn]

The compiled CSS in Tailwind Play is the "dev" version. In reality, you would do a production build. In this, Tailwind runs Lightning CSS with relevant configuration. This would then add the -webkit- prefixes, see this Lighting CSS Playground

[delphi-sucks]

I See, thank you for the clarification.

In my case I use Vite with the tailwindcss vite plugin and the default css transformer postcss with the plugin postcss-nesting.
In this case the resulting code would also be the "dev" version.

I haven't yet verified if building results in a "prod" version, but will do so tomorrow.

But thinking back about my dev case; shouldn't it be expected to also add the -webkit-? Development work on older browsers would otherwise become quite difficult. I have yet to verify if it would make a difference using Lightningcss as transformer in vite, but this would probably, assuming it would fix this issue, not be a possible solution currently as lightningcss in vite is still in early adoption.

[wongjn]

But thinking back about my dev case; shouldn't it be expected to also add the -webkit-?

No. Tailwind deliberately skips the Lightning CSS transpilation in dev to keep it fast. It is expected in the majority of cases that developers will be on new-enough browsers so this is a compromise the maintainers are willing to make.