Use --placeholder-color instead of --background-color for placeholder-* utilities#19843
Merged
RobinMalfait merged 2 commits intomainfrom Mar 23, 2026
Merged
Use --placeholder-color instead of --background-color for placeholder-* utilities#19843RobinMalfait merged 2 commits intomainfrom
--placeholder-color instead of --background-color for placeholder-* utilities#19843RobinMalfait merged 2 commits intomainfrom
Conversation
Contributor
WalkthroughThe 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@CHANGELOG.md`:
- Line 25: Update the changelog entry for the placeholder utilities change to
include a short migration hint: mention that `placeholder-*` utilities now read
from `--placeholder-color` (not `--background-color`), advise users to switch
their custom properties to `--placeholder-color` (or add a fallback CSS variable
mapping if they must keep `--background-color`), and optionally note expected
behavior if `--background-color` fallback is later reintroduced; reference the
`placeholder-*` utilities and the variables `--placeholder-color` and
`--background-color` (and PR `#19843`) in the revised line so upgraders aren’t
surprised.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: bcd43b1a-bcaa-43c8-b4da-1ed774c5564f
📒 Files selected for processing (2)
CHANGELOG.mdpackages/tailwindcss/src/utilities.ts
| - Canonicalization: collapse `scroll-p{t,b}-*` into `scroll-py-*`, `scroll-p{l,r}-*` into `scroll-px-*`, and `scroll-p{t,r,b,l}-*` into `scroll-p-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) | ||
| - Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) | ||
| - Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) | ||
| - Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843)) |
Contributor
There was a problem hiding this comment.
Clarify migration impact in this changelog entry.
This line describes a behavior change that can break setups relying on --background-color; please add a short migration hint (use --placeholder-color, or mention fallback behavior if reintroduced) so upgraders aren’t surprised.
Suggested wording
-- Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([`#19843`](https://github.com/tailwindlabs/tailwindcss/pull/19843))
+- Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities; if you relied on the old behavior, migrate placeholder tokens to `--placeholder-color` ([`#19843`](https://github.com/tailwindlabs/tailwindcss/pull/19843))📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843)) | |
| - Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities; if you relied on the old behavior, migrate placeholder tokens to `--placeholder-color` ([`#19843`](https://github.com/tailwindlabs/tailwindcss/pull/19843)) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@CHANGELOG.md` at line 25, Update the changelog entry for the placeholder
utilities change to include a short migration hint: mention that `placeholder-*`
utilities now read from `--placeholder-color` (not `--background-color`), advise
users to switch their custom properties to `--placeholder-color` (or add a
fallback CSS variable mapping if they must keep `--background-color`), and
optionally note expected behavior if `--background-color` fallback is later
reintroduced; reference the `placeholder-*` utilities and the variables
`--placeholder-color` and `--background-color` (and PR `#19843`) in the revised
line so upgraders aren’t surprised.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes an issue where
placeholder-*utilities were reading values from--background-colorinstead of--placeholder-color. In Tailwind CSS v3, we read fromplaceholderColorwhich is why we should use--placeholder-colorhere as well.tailwindcss/src/corePlugins.js
Line 2317 in f38be22
That said, this is technically a breaking change in case somebody relies on
--background-colorforplaceholdervalues. But since this is text related, and most people will rely on the default--colorvalues 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:
--placeholder-colorinstead (preferred solution)--background-colorafter the--placeholder-color(band-aid solution, but might be worth it who knows)Fixes: #19838
Test plan
placeholderColorwhich in turn reads fromcolorby default. Which is equivalent to--placeholder-colorand--colorin Tailwind CSS v4.