SIGN IN SIGN UP

A utility-first CSS framework for rapid UI development.

0 0 25 TypeScript

Use `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities (#19843)

This PR fixes an issue where `placeholder-*` utilities were reading
values from `--background-color` instead of `--placeholder-color`. In
Tailwind CSS v3, we read from `placeholderColor` which is why we should
use `--placeholder-color` here as well.


https://github.com/tailwindlabs/tailwindcss/blob/f38be227df384504a170409c2131ca5ca8bfe025/src/corePlugins.js#L2317

That said, this is technically a breaking change in case somebody relies
on `--background-color` for `placeholder` values. But since this is text
related, and most people will rely on the default `--color` values
instead, I think it's safe to change this as-is.

In the unlikely event that somebody _does_ rely on this, then we have 2
options:

1. Guide them to make use of `--placeholder-color` instead (preferred
solution)
2. Re-add `--background-color` after the `--placeholder-color` (band-aid
solution, but might be worth it who knows)

Fixes: #19838

## Test plan

1. Existing tests still pass
2. Verified in the Tailwind CSS v3 codebase that we did read from
`placeholderColor` which in turn reads from `color` by default. Which is
equivalent to `--placeholder-color` and `--color` in Tailwind CSS v4.
R
Robin Malfait committed
2c1ef9eb2564f2c83df970eb9f68c19d340c02e5
Parent: 6ec8b89
Committed by GitHub <noreply@github.com> on 3/23/2026, 2:57:20 PM