From 2c1ef9eb2564f2c83df970eb9f68c19d340c02e5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 Mar 2026 15:57:20 +0100 Subject: [PATCH] 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. --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e8b5267b..c766419c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 62e4510b7..a18def9e1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3960,7 +3960,7 @@ export function createUtilities(theme: Theme) { ]) colorUtility('placeholder', { - themeKeys: ['--background-color', '--color'], + themeKeys: ['--placeholder-color', '--color'], handle: (value) => [ styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]), ],