`placeholder-*` ユーティリティが参照するCSS変数を `--placeholder-color` に修正

Tailwind CSS v4において、placeholder-* ユーティリティが誤って --background-color を参照していたバグが修正されました。v3との設計的な一貫性が回復され、プレースホルダーのカラー制御が意図通りに機能するようになります。

背景

Issue #19838 にて、placeholder-* ユーティリティが内部で --background-color を参照していることが報告されました。プレースホルダーはテキストに関連するスタイルであるにもかかわらず、背景色用の変数を参照するという意味的に不正確な状態が存在していました。

Tailwind CSS v3では placeholderColor という専用のテーマキーを参照しており、これはデフォルトで color にフォールバックする設計でした。v4でもこれに相当する --placeholder-color（フォールバックとして --color）を参照すべきでしたが、実装時に誤って --background-color が使われていたことが今回の問題の原因です。

技術的な変更

変更は packages/tailwindcss/src/utilities.ts の1行のみです。colorUtility('placeholder', ...) に渡す themeKeys 配列の先頭要素が --background-color から --placeholder-color に置き換えられました。

変更前:

colorUtility('placeholder', {
  themeKeys: ['--background-color', '--color'],
  handle: (value) => [
    styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]),
  ],

変更後:

colorUtility('placeholder', {
  themeKeys: ['--placeholder-color', '--color'],
  handle: (value) => [
    styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]),
  ],

themeKeys は参照するCSS変数の優先順位リストです。--placeholder-color が定義されていればそれを使い、未定義であれば --color にフォールバックする動作は変わりません。

設計判断

PR内でこの変更は破壊的変更として明示されています。--background-color に意図的に値をセットして placeholder-* の色をコントロールしていたユーザーは影響を受けます。

ただし、PR著者は「プレースホルダーはテキスト関連であり、ほとんどのユーザーはデフォルトの --color に依存している」として、そのまま修正する判断を下しています。影響を受けるユーザーへの対応策としては、--placeholder-color を明示的に定義する方法（推奨）と、--background-color を --placeholder-color の後に再追加するバンドエイド的な対応の2択が挙げられましたが、前者が選択されています。

v3との設計的な整合性を回復させることを優先し、過去の誤った実装に依存するケースを「影響が限定的」と判断した合理的なトレードオフといえます。

まとめ

1行の修正ながら、v3から引き継ぐべき設計上の意図を回復させる重要な変更です。--placeholder-color という意味的に正確な変数を参照することで、テーマカスタマイズの予測可能性が向上します。--background-color を使ってプレースホルダー色を制御していた場合は、--placeholder-color への移行が必要です。