「MedTimer お薬タイマー」という、薬を服用できる時間がわかるWebアプリを個人開発しています。
開発ログ↓
ReactとTailwind CSSで作っているのですが、ボタンの色や枠線の指定が自分でできなくて、毎回AIに頼るしかありませんでした。
それがずっと悔しくて、まずは色のしくみだけでもちゃんと理解したいと思って調べました。
きっかけは、AIが書いてくれたコードの中に --color-ink-soft という見慣れない色の指定があったことです。
「ink-soft って何色…？」と思って、私は一生懸命カラーコードを探していました。
結論から言うと、その色はTailwindの index.css の中にあらかじめ定義されていたのですが、そこに気づくまでがなかなか大変でした。
同じように色の変数で止まっている方の役に立ったらうれしいです。
–color-ink-soft の正体は「名前を付けた色」だった
--color-ink-soft のような書き方は、色そのものではなく、色に付けた名前（変数）でした。
実際の色（カラーコード）は別の場所で決まっていて、--color-ink-soft はそれを呼び出しているだけです。
そのカラーコードがどこにあるかというと、src/index.css の上のほうにある @theme { … } の中でした。
私のお薬タイマーでは、AIがこういう形で色を定義してくれていました。
@theme {
--color-app: #f2f3f5; /* 画面背景 */
--color-card: #ffffff; /* カード・シート */
--color-ink: #2a2c2f; /* 本文 */
--color-ink-soft: #7d858f; /* 注釈・補足テキスト */
--color-ink-faint: #a6adb5; /* プレースホルダー・無効 */
--color-line: #e4e6e9; /* 罫線 */
--color-accent: #0a7aff; /* アクセント（青） */
--color-ready: #4db892; /* 「飲めます」のグリーン */
--color-warning: #ffb348; /* 注意色 */
--color-danger: #d93a3f;
}探していた --color-ink-soft は、ここにちゃんといました。
正体は #7d858f、注釈や補足テキスト用の落ち着いたグレーです。
この一覧を見て、やっと納得できました。
色に ink（本文）、ink-soft（補足）、ink-faint（うすい）と名前を付けておくことで、コードを書くときにカラーコードを覚えなくてよくなるというしくみだったんですね。
こういう「役割ごとに名前を付けた色のセット」は、デザイントークンと呼ばれるようです。
名前を付けておくメリット
最初は「そのまま #7d858f って書けばいいのに、なんで名前にするんだろう」と思っていました。
でも調べてみると、あとから色を変えたいときに1か所直すだけで済むのが大きいようです。
たとえば補足テキストのグレーをもう少し濃くしたくなったら、--color-ink-soft の値を変えるだけで、そのグレーを使っている場所すべてに反映されます。
カラーコードを直接あちこちに書いていると、全部を探して直さないといけません。
名前を付けておくと、その手間がなくなるというわけでした。
色の変数、やっぱり見ただけではわかりにくい
しくみはわかったのですが、それでも困ったことがありました。
コードを書いているとき、text-ink-soft と書いてあっても、それが結局どんな色なのかが頭に浮かびません。
#7d858f と言われても、私にはグレーということくらいしかわからないです。
変数名だけがずらっと並んでいると、画面の色の雰囲気がイメージしづらくて、そこがずっとモヤモヤしていました。
VSCodeの拡張機能「Color Highlight」で色を表示させた
そこで私が使ったのが、VSCodeの拡張機能Color Highlightです。
これを入れると、カラーコードの部分に実際の色が表示されるようになります。
#7d858f と書いてある横（または背景）に、その色がそのまま出るので、コードを見ただけで「あ、このグレーね」とわかります。
導入はかんたんでした。
VSCodeの左側の拡張機能アイコン（四角が組み合わさったマーク）を開いて、検索欄に「Color Highlight」と入れます。
出てきたものをインストールするだけです。
入れたあとは、index.css を開くと @theme の中のカラーコードに色が付いて見えるようになりました。
変数名の羅列だった画面が、急にわかりやすくなったのを覚えています。
拡張機能だけでは足りないところ（細かい色の確認）
ただ、Color Highlightにも限界があります。
色が表示されるのはカラーコードが直接書いてある場所（@theme の定義部分）だけです。
実際にコードを書くときは text-ink-soft のように名前で呼び出すので、その部分には色が出ません。
「この ink-soft って結局どのカラーコードだっけ」を確かめたいときは、別の方法で確認する必要がありました。
調べた範囲では、確実なのは次の2つのようです。
確認方法1：index.css で定義を探す
一番かんたんなのは、定義元をそのまま見に行く方法です。
VSCodeで index.css を開いて、--color-ink-soft を検索します。
ファイル内検索なら Ctrl + F、プロジェクト全体から探すなら Ctrl + Shift + F です。
@theme の中の定義行に飛べるので、そこに書いてあるカラーコードが「本当の色」です。（他のファイルで使っていたらそれも出てくるので少し探しにくい）
Color Highlightを入れていれば、その定義行には色も付いて見えます。
確認方法2：ブラウザの検証ツールで見る
もう1つは、実際の画面で確認する方法です。
ブラウザで画面を右クリックして「検証」（デベロッパーツール）を開き、色を確認したい部分を選びます。
右側のスタイル欄に color: var(--color-ink-soft) のような表示が出ます。
そこの var(--color-ink-soft) にマウスを乗せると、展開された実際のカラーコードが出てくるようです。
新しい色を追加したくなったときのポイント
まだ私自身は色を追加したことがないのですが、追加するならどうすればいいのかも調べておきました。
基本は、@theme の中に新しい行を1つ足すだけのようです。
@theme {
/* 既存の色... */
--color-ink-soft: #7d858f;
/* 新しく足す例 */
--color-note: #8a6d3b; /* メモ用の色 */
}こう定義しておくと、コードの中で text-note や bg-note のように、名前で呼び出せるようになります。
調べた範囲では、追加するときに気をつけたほうがよさそうなポイントが3つありました。
1つめは、名前は役割で付けておくことです。
--color-gray1 のような見た目そのままの名前より、--color-ink-soft（補足テキスト用）のように「何に使う色か」で名前を付けたほうが、あとで見返したときに迷いにくいと思いました。
私のお薬タイマーのAIが書いてくれた命名も、まさにその形になっていました。
2つめは、色の数を増やしすぎないことです。
調べていると、色は絞ったほうが画面が散らからないという考え方をよく見かけました。
実際、お薬タイマーの配色も「単色ベース＋アクセント1色」という方針でまとめられていて、なるほどと思いました。
3つめは、追加したあとは開発サーバーの反映を確認することです。
新しい変数を足しても画面に出ないときは、いったん npm run dev を止めて立ち上げ直すと反映されることがあるようです。
まとめ
今回わかったのは、--color-ink-soft のような書き方は色そのものではなく色に付けた名前（変数）で、実際のカラーコードは index.css の @theme の中に定義されている、ということでした。
カラーコードを外に探しに行っていたのですが、答えは自分のプロジェクトの中にあったんですね。
変数名だけでは色がイメージしづらいので、私はVSCodeのColor Highlightを入れて、カラーコードに色が表示されるようにしました。
ただ、色が出るのは定義部分だけなので、text-ink-soft のように名前で呼び出しているところの色を確かめたいときは、index.css の定義を検索するか、ブラウザの検証ツールで見る、という方法があります。
新しい色を追加するなら、@theme に役割で名前を付けた行を足して、色を増やしすぎない、というのがポイントのようでした。
ボタンの色や枠線をまだ自分で自由にはいじれていませんが、まずは「色がどこで決まっているのか」がわかっただけでも、少し前に進めた気がします。
このお薬タイマー自体の開発の話は別の記事にまとめています。
開発ログ
Tailwind v4の余白がわからない！mb-6の中身「calc(var(–spacing) * 6)」を調べた話
