🎨

Tailwind CSS 4にはドキュメントにないテーマカラーの設定がある

に公開
CSS
Tailwind CSS
デザインシステム
デザイントークン
tech

デザインシステムのセマンティックトークン

デザインシステムをTailwind CSS 4で実装する時、セマンティックトークンを@themeに当てはめていくときに悩むかもしれません。具体的な例はこんな感じです。

@layer base {
  :root {
    /* primaryという色が3種類ある */
    --text-primary: var(--blue-100);
    --border-primary: var(--blue-90);
    --bg-primary: var(--blue-80);
  }
}

ドキュメントの通り、--color-*を設定していくと、

@theme {
  --color-text-primary: var(--text-primary);
  --color-border-primary: var(--border-primary);
  --color-bg-primary: var(--bg-primary);
}

こうなり、実際この色を使って実装する時には、

  • text-text-primary
  • border-border-primary
  • bg-bg-primary

といかにも納得いかないクラスになってしまいます。名前を工夫したつもりで--color-b-primaryとすると今度はborder-bottom-colorを意味するborder-b-*と衝突してしまい、うまくいきません。

text-primary border-primary bg-primary を使いたいですよね？

@themeの隠し仕様

結論、--[type]-color-* を使うことで解決します。

@theme {
  --text-color-primary: var(--text-primary);
  --border-color-primary: var(--border-primary);
  /* --bg-color-* ではないことに注意 */
  --background-color-primary: var(--bg-primary);
}

これで、text-primary border-primary bg-primary クラスが使えるようになります。
筆者が調べた限り、なぜかv4.1のドキュメントには載っておらず、リポジトリのDiscussion[1]で発見しました。重要な仕様だと思うのでTheme variablesに載せておいてほしいですね。

例えばbackground-colorの実際の実装は、この辺りです。
https://github.com/tailwindlabs/tailwindcss/blob/3d1e654c022362f75643a00f9b6407e4822f5202/packages/tailwindcss/src/utilities.ts#L2848

過去はtailwind.config.jsで可能だった

Tailwind CSS 3ではthemeで設定する方法がドキュメントに載っていました。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      textColor: {
        primary: 'var(--text-primary)'
      },
      borderColor: {
        primary: 'var(--border-primary)'
      },
      backgroundColor: {
        primary: 'var(--bg-primary)'
      }
    }
  }
};
脚注

  1. [v4] How to extend or replace colors in certain utilities? ↩︎

Discussion