Cannot apply colors in `placeholder:` variant

[vaibhavshn]

Placeholder color is not applied, but other values work properly.

Using tailwindcss v4.1.10

The VS Code intellisense shows the correct output.

But output class doesn't have any value

Originally posted by @vaibhavshn in #17239 (comment)

[adamwathan]

It's working as expected here:

https://play.tailwindcss.com/MWLv246j7V

What you're seeing is just a dev tools thing, you have the input element selected and that's not where the actual styles are. You'll see the empty class as empty because all it does it define a nested rule which applies to the shadow root placeholder element:

[vaibhavshn]

Weird, I saw the style wasn't even being applied in my app.
Let me see if I can fix this or replicate this in a new project.

[hadrysmateusz]

I have the same issue, it's not just a devtools thing. Looks like it only happens on Chrome though. For context I'm using the postcss version.

[fukumoto-taichi]

I have the same issue.

I have configured it according to the official Tailwind CSS documentation:
https://tailwindcss.com/docs/installation/framework-guides/nextjs

It works correctly in my environment, but it doesn’t work in the tester’s environment. Both of us are checking on Windows OS / Chrome.

[franpeza]

Same problem here in a next app. 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

Should I open a new issue? @adamwathan