「MedTimer お薬タイマー」という、薬を服用できる時間がわかるWebアプリをReactとTailwind CSSで個人開発しています。
開発ログ↓
開発中のコードに bg-accent という指定があって、「この accent（アクセント）という色はどこで決まっているんだろう」と気になりました。
Tailwindにもともと bg-blue-500 のような色は用意されているのですが、bg-accent はそういう既定の名前ではありません。
調べたら、これは自分（というかAI）が index.css であらかじめ決めておいた色でした。
ここが最初わかりにくかったので、簡単にまとめておきます。
bg-accent を使うには、先に色を定義しておく
結論から書くと、bg-accent のような独自の色を使うには、先に src/index.css の @theme { … } の中で色を決めておく必要がありました。
私のお薬タイマーでは、こう書いてありました。
@theme {
--color-accent: #0a7aff; /* アクセント（青） */
}この一行があるおかげで、Tailwindが「accent という色があるんだな」と認識してくれます。
そうすると、コードの中で
bg-accent（背景）
や
text-accent（文字色）
が使えるようになる、というしくみでした。
–color-〇〇 の「〇〇」がそのままクラス名になる
ポイントは、--color- のあとに付けた名前が、そのままクラス名になることでした。
--color-accent と定義したから bg-accent が使える、という関係です。
お薬タイマーには他にもいくつか色が定義されていたので、それぞれこう対応します。
| index.css での定義 | 使えるクラスの例 |
|---|---|
| –color-accent | bg-accent / text-accent |
| –color-ready | bg-ready / text-ready |
| –color-danger | bg-danger / text-danger |
| –color-ink-soft | text-ink-soft など |
背景なら bg-、文字色なら text-、枠線なら border- を頭に付ける、という使い分けです。
名前を一度決めておけば、あとはカラーコードを覚えなくても名前で呼び出せる、というのは便利だなと思いました。
定義していない色は呼び出せない
逆に言うと、@theme に定義していない独自の色は bg-〇〇 で呼び出せません。
たとえば bg-purple と書いても、--color-purple を定義していなければ何も効きません。
「AIが書いたコードの色は効くのに、自分で適当に付けた色名が効かない」というときは、たいていこの定義漏れのようです。
新しい色を使いたいときは、まず @theme に --color-〇〇 を足す、という順番になります。
もともと用意されている色は定義不要
ひとつ補足しておくと、Tailwindには最初から用意されている色もあります。
bg-blue-500 や bg-gray-100 のような、色名＋数字の形のものです。
これらは自分で定義しなくても、そのまま使えます。
つまり、色は2種類に分けて考えるとわかりやすかったです。
ひとつは bg-blue-500 のようなもともと用意されている色で、定義なしで使えるもの。
もうひとつは bg-accent のような自分で名前を付けた独自の色で、@theme に定義したぶんだけ使えるもの。
お薬タイマーは後者で、役割ごとに名前を付けた色でそろえてありました。
まとめ
bg-accent のような独自カラーは、index.css の @theme であらかじめ色を決めておくことで使えるようになる、というのが今回わかったことでした。
--color-accent と定義すれば bg-accent や text-accent が使えて、定義していない色名は効かない。
そして bg-blue-500 のようにTailwindが最初から持っている色は、定義しなくても使える。
この住み分けがわかってから、コードの中の色の指定を前より落ち着いて読めるようになりました。
色の変数の正体や、カラーコードの確認方法については別の記事にくわしく書いています。
Tailwindの基本のクラス一覧はチートシート記事にまとめてあります。
