こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法をご紹介します。
なお、本稿の内容は v4.1.13（2025年9月24日時点の最新版）のTailwind CSSに準じています。
実現したいこと
冒頭、実現したいことを整理します。
Tailwind CSSでは @import "tailwindcss"; を宣言した設定用CSSファイルの @theme{}にてテーマがカスタマイズできます。
例えば、デフォルトのカラーパレットのうち、red-500が持つカラーコードを変更したい場合は以下のように記述します。
@import "tailwindcss"; @theme { /* デフォルトを上書く */ --color-red-500: #ef4444; }
これにより、プロダクト固有のスタイルガイドを有する場合に、Tailwind CSSのテーマに反映できます。
しかし、このカスタマイズ方法はあくまで上書きですので、変更していないものは呼び出せてしまいます。
@import "tailwindcss"; @theme { /* 自分で定義したカラー */ --color-white: #ffffff; --color-black: #000000; --color-red: #ef4444; }
<!-- 自分で定義したカラー以外も呼び出せてしまう --> <p class="text-pink-500">テキスト</p>
この状態ですと、プロダクトのスタイルガイドで定義されたルールを逸脱したスタイリングも可能となってしまいます。
一方で今回実現したいのは、Tailwind CSSが用意したカラーテーマを無効にして、@theme {}内に自分で定義したカラーのみが呼び出せるようにすることです。
テーマのネームスペースに対してinitialを宣言すると無効にできる
Tailwind CSSでデフォルトのテーマを無効にしたい場合は、テーマのカテゴリごとのネームスペースに対して initial を宣言すると無効にできます。
例えば、デフォルトのカラー（ネームスペースは--color-*）をすべて無効にする場合は次のようにします。
@import "tailwindcss"; @theme { /* デフォルトのカラーを無効化 */ --color-*: initial; /* プロダクト定義のカラー */ --color-white: #ffffff; --color-black: #000000; --color-red: #ef4444; }
<!-- 定義済みのカラーは呼び出せる --> <p class="text-red">テキスト</p> <!-- 未定義のカラーは呼び出せない --> <p class="text-pink-500">テキスト</p>
カラーの系統単位での無効化も可能です。
@import "tailwindcss"; @theme { /* blueシリーズは無効化 */ --color-blue-*: initial; }
<!-- 呼び出せる --> <p class="text-red-500">テキスト</p> <!-- 呼び出せない --> <p class="text-blue-500">テキスト</p>
まとめ
今回は、Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法をご紹介しました。
この手法により、プロダクト固有のスタイルガイドが存在し、それを厳格に運用したい場合に、口伝ではなく仕組みで制約を設けられます。
一方でカラーパレットが不十分な場合にこの手法を用いてしまうと、text-[#931938]のような絶対値での指定が増えてしまいUIの一貫性が保てなくなってしまう可能性があるため、チーム内での議論と認識合わせをした上での導入が必要と考えます。
Tailwind CSSを使用する方の一助となれば幸いです。ご精読ありがとうございました。
