Cannot apply colors to placeholder in Chrome unless !important is used

[franpeza]

I'm creating a new issue for this problem that was already reported and closed but I still reproduce it in the latest version.

text-color is not applied in Chrome unless you use !important, works as expected in Firefox and Safari.

A small repo with a basic case https://github.com/franpeza/placeholder-styling-issues

What version of Tailwind CSS are you using?

4.1.14

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

@tailwindcss/postcss: 4.1.14
next: 15.5.4

What version of Node.js are you using?

v24.0.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/franpeza/placeholder-styling-issues

Describe your issue

Colors are not applied to placeholder in Chrome unless you use !important

[thecrypticace]

I cannot reproduce this in Arc, Chrome, or Chrome Canary.

It appears to work in Play and your reproduction.

Can you provide screenshots of what you're seeing?

[thecrypticace]

Also, could you test in Chrome Canary? I have a feeling it's related to settings you have set (likely unintentionally) in Chrome itself.

[franpeza]

I've tested in all Chrome flavors I have installed (stable, beta and canary) with the same result:

I didn't tested in other chromium browsers but I've done it now and in Brave and Opera it works as expected 🤔

In the case of Chrome beta and canary I don't have any extension installed, the only difference between all chrome versions and Brave and Opera is that the formers are managed by my organization 🤔

I've created a new branch v3 with the same example using tailwind v3 and the output is the expected one

[thecrypticace]

That is super weird. I assume this has something to do with CSS variables and maybe a browser bug caused by some other overriding settings.

Are you able to access chrome://version to verify what version you are on? (Just the version number — I wouldn't post a whole dump of that here b/c I don't know if there's identifying information on that screen).

[franpeza]

Sure:

• stable: 141.0.7390.66 (Official Build) (arm64)
• beta: 142.0.7444.3 (Official Build) beta (arm64)
• canary: 143.0.7459.0 (Official Build) canary (arm64)

[franpeza]

After some digging it turns out that I have some extensions added by policy and one of them is injecting a global style that overrides the placeholder color for all elements. I will file an issue on that extension to have these global styles removed, not nice on their part :(

Not sure if we could apply a workaround for this or or other cases we may have with different extensions that don't play nice and inject global styles :(