inset-shadow-none に `inset` キーワードを追加してトランジションを正しく

Tailwind CSS の inset-shadow-none ユーティリティが影を無くすだけで inset キーワードを欠いていたため、トランジションが期待通りに動作しなかった。本 PR はこのキーワードを追加し、他の inset シャドウとの遷移を正しく行えるようにした。

背景

inset-shadow-none は、影を無くす目的で --tw-inset-shadow を 0 0 #0000 と定義していた。しかし inset キーワードが欠如しているため、CSS エンジンはこのカスタムプロパティを外側シャドウとして扱い、inset-shadow-* 系列とのトランジション時にタイプ不一致が生じた。結果として、inset-shadow-none から他の inset シャドウへ遷移させても、アニメーションがスムーズに進まないというバグが報告された。この挙動は Playwright のデモでも確認でき、修正の必要性が明確となった。

技術的な変更

本修正では、packages/tailwindcss/src/utilities.ts のユーティリティ生成ロジックに inset キーワード を付与するだけのシンプルな差分を加えた。

変更前:

- decl('--tw-inset-shadow', nullShadow),

変更後:

+ decl('--tw-inset-shadow', `inset ${nullShadow}`),

nullShadow は 0 0 #0000 という文字列で、変更後は inset ${nullShadow} になるため、--tw-inset-shadow の値が inset 0 0 #0000 に変化する。この変更は他の inset-shadow-* ユーティリティと同一の構文を持つようになるため、トランジション時の CSS カスタムプロパティ型が統一され、スムーズなアニメーションが実現する。

同時に packages/tailwindcss/src/utilities.test.ts の期待値も --tw-inset-shadow: inset 0 0 #0000; に更新し、テストが実装通りの出力を検証できるようにした。この修正に伴い、テストスイートは新しいカスタムプロパティを正しく評価し、失敗がなくなった。

さらに CHANGELOG.md に本変更の概要として「Ensure transitions between inset-shadow-none and other inset shadows work correctly」を追記し、利用者に変更点を明示した。

設計判断

設計上は既存のユーティリティ生成フローを変更せず、nullShadow に対して文字列結合で inset を付与するだけの最小限の侵入で実装された。このアプローチは inset-shadow-none が本来「影なし」だという振る舞いを保ちつつ、CSS カスタムプロパティの型を他の inset シャドウと揃えるという目的を達成している。inset キーワードを追加したことは API 互換性を破壊しないため、既存プロジェクトが破壊的に動作変化するリスクは低い。

まとめ

inset-shadow-none に inset キーワードを付与することで、他の inset シャドウとのトランジションが正しく機能し、開発者は期待通りのアニメーションを利用できるようになった。小さな文字列変更ながら CSS カスタムプロパティの整合性を保ち、後方互換性を損なわない設計判断が示された。