※Tailwind CSSのチートシート兼プレイグラウンドを作りました。よかったら見ていってください。

v3に限らず、Tailwind CSSのデフォルトのカラーシステムでは色指定に色名を使う。しかし、CSSのそれとは根本的に異なり、独自に体系立てられている。

v1のドキュメントに以下のような記載があり、v2にも類似の表現がある。

We picked all of Tailwind’s default colors by hand, balancing them by eye.

引用元:Customizing Colors – Tailwind CSS

訳：私たちはTailwindのデフォルトカラーをすべて手作業で選び、目で見てバランスを取りました。

引用元:DeepL翻訳：高精度な翻訳ツール

v3のドキュメントでは「専門家が作成したカラーパレット」というような表現も見られる。ただ、いずれにせよTailwind CSS独自のカラーシステムであることに変わりはない（なにかの色理論が下地になっている可能性はある）。

したがって、色を指定するにもちょっとしたお勉強が必要である。

色名の使い方

Tailwind CSSでは、属性-色名-濃淡のスケールのようなクラス名で要素の各部の色を指定する。例えばテキスト色であればtext-amber-500、背景色であればbg-amber-500といった具合である。

まずは、色に関わるCSSの属性と、それに対応するTailwind CSS v3のクラス名をまとめる。

属性値とクラスの対応

CSS Tailwind CSS
color:#f59e0b; text-amber-500
background-color:#f59e0b; bg-amber-500
caret-color:#f59e0b;
caret-amber-500


border-style: solid;
border-width:8px;
border-color:#f59e0b;
border-solid border-2 border-amber-500
box-shadow: 0 1px 2px 0 rgb(245 158 11 / 0.5);
shadow-sm shadow-amber-500/50
text-decoration-line: underline;
text-decoration-color:f59e0b;		 underline decoration-amber-500
background-image: linear-gradient(to right, #fcd34d, #bef264); bg-gradient-to-r from-amber-300 to-lime-300

わかりやすいかと思って属性値をまとめてみたが、逆にとっ散らかった感がある。特にbox-shadowやlinear-gradientのあたりがややこしい。単独では用を成さず、複数のクラスを組み合わせて使う必要があるからだ。

また、Tailwind CSSにはこれらの他にRingやDivideなどの独自の概念がある。box-shadow、linear-gradient、なども含め、諸々の詳細は、またの機会にまとめたいと思う。

とりあえず、属性-色名-濃淡のスケールという記法だけ頭に置いておく。

デフォルトで使える色名

TailwindCSS v3では、以下の22種類の色名がデフォルトで用意されている。

Slate
(青寄りの灰色)
Gray
(灰色)
Zinc
(少し明るい灰色)
Neutral
(明るい灰色)
Stone
(茶寄りの灰色)
Red
(赤色)
Orange
(橙色)
Amber
(琥珀色)
Yellow
(黄色)
Lime
(黄緑色)
Green
(緑色)
Emerald
(緑寄りの青緑色)
Teal
(青寄りの青緑色)
Cyan
(緑寄りの青色)
Sky
(水色)
Blue
(青色)
Indigo
(藍色)
Violet
(青紫色)
Purple
(赤紫色)
Fuchsia
(赤寄りの紫色)
Pink
(桃色)
Rose
(薔薇色)

謎の美意識に突き動かされ、色名の一文字目を大文字にしてしまった。クラス名として使う時は、bg-amber-500のように、すべて小文字で指定する。また、日本語の色名は独断で補足した。

CSSで使われている色名と共通するものもの多いが、対応するカラーコードが異なるため、注意が必要である。

また、上記22種類とは別に、濃淡を指定できない以下の5つの色（というか値）がある。意味はCSSと変わらない（CSSにcurrentcolorなんてキーワードがあることを初めて知った）。

色名(?) 意味
inherit 親の色を継承。
transparent 透明。
currentColor その要素の文字色。
black 黒。
white 白。

濃淡のスケール

v3では、色の濃淡は11段階のスケールで表現される。スケールは50から始まり、その後は100、200、…と900まで100刻みで進み、最後は950で終わる。

以下は、22種類の色の11段階のスケールを示したものである。なお、文字色は背景色から5つスケールをズラした。

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950

これら242色と、先に示したtransparent、black、whiteの合計245色が、TailwindCSS v3で使える色である（currentColorとinheritは、色ではないので除外する）。

ちなみに、デフォルトの色、というかベースの色は、中央（6番目）の500が該当する……の？　定かではないが、勝手にそうであろうと理解する。

カラーパレットのカスタマイズ方法

Tailwind CSSのカラーシステムは、上書きもできれば拡張もできる。これらの設定はtailwind.config.jsに記述する。

デフォルトの設定を上書きする

デフォルトの設定を上書きする場合は、theme.colorsプロパティに、キーバリュー形式で色名とその値を指定したオブジェクトを格納する。色名キーの値には、CSSで有効な色の指定方法がすべて使用可能である。

colorsプロパティに指定するオブジェクトの各キーは、属性-色名-濃淡のスケールの色名に対応している。上書きした色名は、属性名-カスタムの色名という形で指定できる。

濃淡のスケールを表現する場合は、色名のキーに対して、濃淡のスケールとその値を指定したキーバリュー形式のオブジェクトを格納する。こうすると、属性名-カスタムの色名-濃淡のスケールという形式が使える。

何を言っているのかわからなくなってきた。

ともかく、以下のようなイメージでデフォルトの設定を上書きできる。

js
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    colors: {
      black: "#000000",
      gold: {
        DEFAULT: "#FFD700",
        50: "rgba(255, 255, 231, 1)",
        500: "gold",
        950: "hsla(31, 88%, 14%, 1)",
        1000: "yellow",
        unko: "brown",
      },
    },
  },
};

DEFAULTを指定すると、濃淡のスケールを指定可能にしつつも、bg-goldのようなクラス指定が使える（bg-gold-DEFAULTとしてもスタイルは適用されない）。

また、濃淡のスケールというのは、あくまでTailwind CSS開発チームが設定したカラースキームに基づいた切り口である。カスタマイズする場合、50-950までの濃淡のスケールを真面目に守らなくてもいいし、そもそも数字でなくても良い。アイディア次第で柔軟に色の管理方法を選択できる（xx-zz-yyというクラス指定の書式は変えられないが）。

また、デフォルトのカラーシステムを上書きすると、transparentとcurrentColorが使えなくなる。両者を使用したい場合は、transparent: 'transparent'とcurrent: 'currentColor'を、あらためて設定に含めてやる必要がある。

デフォルトの設定を拡張する

デフォルトの設定を残して任意の色を追加する場合は、theme.colorsではなくtheme.extend.colorsに設定を記述する。

js
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        black: "#000000",
        gold: {
          DEFAULT: "#FFD700",
          50: "rgba(255, 255, 231, 1)",
          500: "gold",
          950: "hsla(31, 88%, 14%, 1)",
          1000: "yellow",
          unko: "brown",
        },
      },
    },
  },
};

設定オブジェクトの内容はほぼ変わらない。

CDNを利用する場合

CDNを介してTailwind CSS v3の静的ファイルと読み込むと、tailwindというグローバル変数(Proxyオブジェクト)が追加される。

tailwind.config.jsの代わりに、任意の<script>タグ内で、tailwindオブジェクトのconfigプロパティに設定を記述する。

html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            gold: {
              DEFAULT: "#FFD700",
              50: "rgba(255, 255, 231, 1)",
              500: "gold",
              950: "hsla(31, 88%, 14%, 1)",
              1000: "yellow",
              unko: "brown",
            },
            black: "#000000",
          }
        }
      }
    }
  </script>
</head>
<body>
  <div class="grid grid-cols-1 mt-4 gap-1 sm:grid-cols-2 lg:grid-cols-4">
    <div class="bg-gold-50 rounded text-center">bg-gold-50</div>
    <div class="bg-gold rounded text-center">bg-gold</div>
    <div class="bg-gold-500 rounded text-center">bg-gold-500</div>
    <div class="bg-gold-950 rounded text-center text-white"">bg-gold-950</div>
    <div class="bg-gold-1000 rounded text-center">bg-gold-1000</div>
    <div class="bg-gold-unko rounded text-center">bg-gold-unko</div>
    <div class="bg-black rounded text-center text-white">bg-black</div>
  </div>
</body>
</html>

なお、Tailwind CSSのCDNは開発目的に利用することのみを前提に設計されている。本番では使わない方が良い。公式ドキュメントでもそう警告されている。

CDNは全機能が詰め込まれるため重いし、設定の柔軟性にも限りがある。パフォーマンスを重視したいWebサイトやWebアプリでは、普通にnpmパッケージを利用した方が無難である。

1回しか使わない色の設定

使い回す予定のない、その場限りのスタイルは、bg-[black]のようなクラスで指定できる。[]を使う書式は、色に限らず、その他の属性でも同じである。

html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="bg-[#333333] text-[gold] w-[200px] h-[100px]">わが母なるロージー</div>
</body>
</html>

色のカスタマイズに役立つサービス

イチから色の組み合わせを考えるのは骨である。Tailwind CSSの公式に、カラーパレットの生成に役立つサービスとしてUI ColorsとColorBoxとPalettteの3つが紹介されている。

このうち、UI Colorsはメインビジュアルにでかでかと「Tailwind CSS Color Generator」と書いてあった。色コードを1つ入力すると、その色をデフォルト（500）とする11段階のスケールを生成してくれる。看板通りの機能を備えている。手っ取り早く適当なスケールが欲しいときには、これを使えば良いと思う。

参考資料