Tailwind CSS で color-mix() を使う

color-mix() と Tailwind

Tailwind は独自パレットを出荷しますが、ランタイム派生色や 1 回限りの 混合が必要な場面で color-mix() が完璧に補完します。

任意値構文 (Tailwind 3 と 4)

<button class="bg-[color-mix(in_oklch,theme(colors.blue.500),white_20%)]">
  ライトニングされた青
</button>

重要：Tailwind の任意値パーサーは空白を許容しないため、アンダースコア で置換します (in_oklch)。ブラウザはトップレベルトークン間の アンダースコアを許容し、空白として扱います。

Tailwind v4 — @theme 統合

Tailwind v4 では @theme でトークンを定義し、color-mix() で パレットステップを派生できます：

@theme {
  --color-brand: #2563eb;
  --color-brand-hover: color-mix(in oklch, var(--color-brand), black 12%);
  --color-brand-soft:  color-mix(in oklch, var(--color-brand) 16%, white);
}

これで bg-brand、bg-brand-hover、bg-brand-soft を組み込み パレットステップのように使えます。

派生色を使った @apply

.btn {
  @apply text-white;
  background: var(--color-brand);
}
.btn:hover {
  background: color-mix(in oklch, var(--color-brand), black 12%);
}

Tailwind コンバーターと組み合わせる

既存 CSS パレットを Tailwind トークンへ移行する際は、 Tailwind CSS コンバーター が各色の 最寄りユーティリティを示し、color-mix() がカスタム派生値を引き受けます。