1. ホーム /
  2. デザイン /
  3. Tailwind CSS v4でtailwind.config.jsが無い？｜@themeでカスタムカラーを定義する方法

Tailwind CSS v4でtailwind.config.jsが無い？｜@themeでカスタムカラーを定義する方法

Tailwind CSS v3のtailwind.config.js（JS設定）とv4のapp.css内@theme（CSS設定）を並べた比較図。カスタムカラーの設定がCSSに移ったことを示す
  • このエントリーをはてなブックマークに追加

スポンサーリンク

Tailwind CSS を v4 に上げたら、tailwind.config.js が見当たらない——「設定ってどこに書くの？」「ブランドカラーを追加したいのに、今までのやり方が通用しない」と戸惑っていませんか？ これはあなたのプロジェクトが壊れたわけでも、インストールに失敗したわけでもありません。v4 で設定の置き場所そのものが変わったのが原因です。

この記事では、v4 でカスタムカラーを定義する新しい方法を、最小のコードから順に解説します。まず結論から。v4 は設定を CSS に書きます。@import "tailwindcss"; の後ろに @theme ブロックを足すだけです。

/* app.css など、CSS のエントリーポイント */
@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
}

たったこれだけで、bg-brand text-brand border-brand といったユーティリティが自動で使えるようになります。「なぜ JS 設定が無くなったのか」「生成されるクラスの仕組み」「既存の tailwind.config.js を活かす方法」まで、順に見ていきましょう。

なぜ tailwind.config.js が無くなったのか

v3 までは、カスタムカラーやフォントを tailwind.config.js という JavaScript ファイルに書いていました。v4 はこの方式をやめ、設定を CSS に書く「CSS ファースト」に切り替わりました。v4 では JS の設定ファイルは自動では読み込まれません。

これは単なる気まぐれな変更ではありません。設定を CSS 側に寄せることで、宣言した値がそのまま CSS 変数（カスタムプロパティ）として出力されるという実利があります。たとえば --color-brand を定義すると、Tailwind のユーティリティだけでなく、生の CSS や JavaScript からも var(--color-brand) で同じ色を参照できます。設定と実際のスタイルが二重管理にならずに済むわけです。

config ファイルと CSS を行き来せず、スタイルに関する情報を1か所にまとめられる。これが CSS ファーストの一番のメリットです。

Tailwind CSS v3のtailwind.config.js（JS設定）とv4のapp.css内@theme（CSS設定）を並べた比較図。カスタムカラーの設定がCSSに移ったことを示す
v4ではカスタムカラーの設定がJSファイルからCSSの@themeに移った

@theme でカスタムカラーを宣言する

カスタムカラーは @theme ブロックの中に --color-◯◯ という名前で書きます。この --color- というプレフィックス（名前空間）が重要で、これを見て Tailwind が「色のユーティリティを作ればいいんだな」と判断します。

@import "tailwindcss";

@theme {
  --color-brand: #2563eb;        /* メインカラー */
  --color-brand-light: #60a5fa;  /* 薄いバリエーション */
  --color-accent: #f59e0b;       /* アクセント */
}

こう書くと、宣言した名前の分だけ色系のユーティリティが一式そろいます。あとは HTML で今までどおりクラスを当てるだけです。

<button class="bg-brand text-white hover:bg-brand-light">
  購入する
</button>

<span class="text-accent border border-accent">NEW</span>

標準カラー（blue-500 など）とまったく同じ感覚で、自分の色を使えます。しかも bg-brand/80 のような不透明度の指定（opacity modifier）もそのまま効きます。

1つの名前から、どんなユーティリティが生成されるのか

--color-brand を1つ宣言すると、色を使う主要なプロパティのユーティリティがまとめて生成されます。代表的なものを整理しておきます。

  • bg-brand … 背景色（background-color）
  • text-brand … 文字色（color）
  • border-brand … 枠線の色（border-color）
  • ring-brand … フォーカスリングの色
  • fill-brand / stroke-brand … SVG の塗り・線
  • divide-brand / outline-brand … 区切り線・アウトライン
@themeで--color-brandを1つ宣言すると、bg-brand・text-brand・border-brand・ring-brand・fill-brand・bg-brand/80などのユーティリティが自動生成されることを示す図
–color-brandを1つ宣言するだけで、色を使う主要なユーティリティがまとめて生成される

「色を1つ足したら、それに関するクラスが全部ついてくる」と考えておけば十分です。色ごとに bg- も text- も手で定義する必要はありません。

色以外のトークンも同じ仕組みで定義できる

@theme で定義できるのは色だけではありません。フォント・角丸・ブレークポイントなども、名前空間（プレフィックス）を変えるだけで同じように宣言できます。よく使うものを挙げておきます。

@theme {
  --font-display: "Zen Kaku Gothic New", sans-serif; /* font-display */
  --radius-card: 1rem;                                /* rounded-card */
  --breakpoint-3xl: 120rem;                           /* 3xl: のバリアント */
  --spacing-gutter: 2.5rem;                           /* p-gutter / m-gutter など */
}

それぞれ font-display、rounded-card、3xl:grid-cols-4 のようなブレークポイント、p-gutter といったユーティリティが生成されます。「名前空間 ＋ 自分の名前」で、デザイントークンを一元管理できるわけです。デザインシステムを CSS に集約したいときに効いてきます。

色を @theme でトークン化しておくメリットは保守面でも大きいです。たとえばブランドカラーを --color-brand に集約しておけば、ダークモードの実装で色を切り替えるときも、参照先の変数を差し替えるだけで全体に反映できます。色のハードコードを散らかさずに済むわけです。

デフォルトのカラーパレットはどうなる？（oklch）

カスタムカラーを足しても、blue-500 などの標準パレットはそのまま残ります。追加であって、置き換えではありません。なお v4 の標準カラーは、従来の HEX / RGB ではなく oklch() という色空間で定義されるようになりました。より鮮やかで、明るさの調整が直感的なのが特長です。

自分のカスタムカラーも oklch() で書けますが、まずは使い慣れた HEX でまったく問題ありません。標準パレット全体を消して自分の色だけにしたい場合は、--color-*: initial; を先頭に書いてリセットしてから宣言します。ただし既存クラスが一斉に無効になるので、通常は「追加」で運用するのがおすすめです。

既存の tailwind.config.js を活かしたい場合（@config）

v3 から移行する途中で、「設定量が多くて一気に CSS へ書き直せない」こともあります。その場合は @config ディレクティブで、既存の JS 設定ファイルを明示的に読み込めます。移行の逃げ道として用意されています。

@import "tailwindcss";

/* 既存の JS 設定を読み込む（パスは CSS からの相対） */
@config "../tailwind.config.js";

これで v3 時代の theme.extend などをそのまま使えます。ただし corePlugins など v4 で非対応になったオプションもあるため、あくまで移行期の一時的な手段と考えてください。落ち着いたら @theme に寄せていくのが本筋です。

つまずき対処：カスタムカラーのクラスが生成されない

「@theme に書いたのに bg-brand が効かない」というときは、ほぼ次のどちらかです。順に確認してみてください。

/* NG① @theme の外に書いている → ただの CSS 変数で、ユーティリティは作られない */
:root {
  --color-brand: #2563eb;
}

/* NG② プレフィックスが抜けている → 色だと認識されない */
@theme {
  --brand: #2563eb;
}

/* OK @theme の中 ＆ --color- プレフィックスが揃っている */
@theme {
  --color-brand: #2563eb;
}

ポイントは2つです。①宣言は必ず @theme の中に書く（:root に書くと変数にはなるがユーティリティは生成されない）、②名前空間プレフィックス（--color- など）を省略しない。この2点を押さえれば、たいていの「効かない」は解決します。

それでも効かないときは、@import "tailwindcss"; より前に @theme を書いていないか、クラス名を文字列結合（bg-${color} のような動的生成）していないか——もチェックしましょう。後者は Tailwind がクラスを検出できず、生成対象から外れてしまいます。

まとめ：v4のカスタムカラーはCSSに書く

Tailwind CSS v4 でカスタムカラーを定義するときのポイントを、最後に整理します。

  • tailwind.config.js は不要。設定は CSS の @theme に書く
  • @theme { --color-brand: #2563eb; } で bg-brand などが自動生成される
  • 名前空間を変えれば、フォント・角丸・余白などもトークン化できる
  • 標準パレットは残る（追加であって置き換えではない）。v4 標準色は oklch()
  • 既存の JS 設定は @config で読み込める（移行期の逃げ道）
  • 効かないときは「@theme の中か」「プレフィックスが揃っているか」を確認

「設定ファイルが無い」と焦る必要はありません。むしろ CSS に集約できるぶん、色やデザイントークンの管理はシンプルになります。まず --color-brand を1つ足すところから始めてみてください。

Tailwind の基本をおさらいしたい方はTailwind CSSの使い方【初心者向け】を、ここで定義した色をダークモードで切り替える方法はTailwind CSSでダークモードを実装する方法を参考にしてください。そもそも Tailwind を選ぶべきか迷っている段階ならTailwind CSSとBootstrapの違いもあわせてどうぞ。

スポンサーリンク

  • このエントリーをはてなブックマークに追加