shwldshwld5 days ago

Tailwind v4 の dark variant をアプリ内 .dark トグルに同期する

ダークモードでだけグラデーションのフェードが白背景のままになる、というバグ。Tailwind v4 にした後、dark:from-slate-900 のような従来の指定が効いていなかった。

Tailwind v4 のデフォルトの dark バリアントは prefers-color-scheme: dark ベース。useTheme 等で <html class="dark"> を付けるアプリ内トグルを使っている場合、OS設定とアプリ内設定が一致しないとクラスベースの dark: が反応しない。

修正は CSS で dark バリアントを .dark クラス基準に上書きする1行と、グラデーションをカード背景に合わせる CSS 変数化:

@import "tailwindcss";

/* useTheme が html に付ける .dark と同期 */
@custom-variant dark (&:where(.dark, .dark *));

// Before: ライト前提の白 → ダークで残る
<div className="bg-gradient-to-t from-white to-transparent dark:from-slate-900" />

// After: カード背景の CSS 変数を使えばモード切替に追従する
<div className="bg-gradient-to-t from-[var(--color-surface)] to-transparent" />

ポイント:

  • v4 で OS依存ではなくアプリ内クラスでモード切替したいなら @custom-variant dark の上書きが必須（公式ドキュメントに記載）
  • 「白で消える」系のフェードは色を直書きせず、テーマ変数（--color-surface など）から引くと dark/light 両対応できる
shwldshwld