Tailwind CSSで色の設定を行う

2026.03.02

HTML・CSS

Astro

Tailwind CSSの色周りの設定を確認してみます。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17です。

サンプルコード

Tailwind CSSでは、以下の色で11段階のカラーパレットが用意されています。

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
slate
gray
zinc
neutral
stone

各色で50,100,200,300,400,500,600,700,800,900,950の11段階のカラーレベルがあります。
背景色の場合はbg-red-200、文字色の場合はtext-orange-700などのような使い方をします。

カラーパレットを一覧で表示してみます。

---
import Layout from '../../layouts/Layout.astro';

const colors = [
  // Red
  'bg-red-50', 'bg-red-100', 'bg-red-200', 'bg-red-300', 'bg-red-400', 'bg-red-500', 'bg-red-600', 'bg-red-700', 'bg-red-800', 'bg-red-900', 'bg-red-950',
  // Orange
  'bg-orange-50', 'bg-orange-100', 'bg-orange-200', 'bg-orange-300', 'bg-orange-400', 'bg-orange-500', 'bg-orange-600', 'bg-orange-700', 'bg-orange-800', 'bg-orange-900', 'bg-orange-950',
  // Amber
  'bg-amber-50', 'bg-amber-100', 'bg-amber-200', 'bg-amber-300', 'bg-amber-400', 'bg-amber-500', 'bg-amber-600', 'bg-amber-700', 'bg-amber-800', 'bg-amber-900', 'bg-amber-950',
  // Yellow
  'bg-yellow-50', 'bg-yellow-100', 'bg-yellow-200', 'bg-yellow-300', 'bg-yellow-400', 'bg-yellow-500', 'bg-yellow-600', 'bg-yellow-700', 'bg-yellow-800', 'bg-yellow-900', 'bg-yellow-950',
  // Lime
  'bg-lime-50', 'bg-lime-100', 'bg-lime-200', 'bg-lime-300', 'bg-lime-400', 'bg-lime-500', 'bg-lime-600', 'bg-lime-700', 'bg-lime-800', 'bg-lime-900', 'bg-lime-950',
  // Green
  'bg-green-50', 'bg-green-100', 'bg-green-200', 'bg-green-300', 'bg-green-400', 'bg-green-500', 'bg-green-600', 'bg-green-700', 'bg-green-800', 'bg-green-900', 'bg-green-950',
  // Emerald
  'bg-emerald-50', 'bg-emerald-100', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-400', 'bg-emerald-500', 'bg-emerald-600', 'bg-emerald-700', 'bg-emerald-800', 'bg-emerald-900', 'bg-emerald-950',
  // Teal
  'bg-teal-50', 'bg-teal-100', 'bg-teal-200', 'bg-teal-300', 'bg-teal-400', 'bg-teal-500', 'bg-teal-600', 'bg-teal-700', 'bg-teal-800', 'bg-teal-900', 'bg-teal-950',
  // Cyan
  'bg-cyan-50', 'bg-cyan-100', 'bg-cyan-200', 'bg-cyan-300', 'bg-cyan-400', 'bg-cyan-500', 'bg-cyan-600', 'bg-cyan-700', 'bg-cyan-800', 'bg-cyan-900', 'bg-cyan-950',
  // Sky
  'bg-sky-50', 'bg-sky-100', 'bg-sky-200', 'bg-sky-300', 'bg-sky-400', 'bg-sky-500', 'bg-sky-600', 'bg-sky-700', 'bg-sky-800', 'bg-sky-900', 'bg-sky-950',
  // Blue
  'bg-blue-50', 'bg-blue-100', 'bg-blue-200', 'bg-blue-300', 'bg-blue-400', 'bg-blue-500', 'bg-blue-600', 'bg-blue-700', 'bg-blue-800', 'bg-blue-900', 'bg-blue-950',
  // Indigo
  'bg-indigo-50', 'bg-indigo-100', 'bg-indigo-200', 'bg-indigo-300', 'bg-indigo-400', 'bg-indigo-500', 'bg-indigo-600', 'bg-indigo-700', 'bg-indigo-800', 'bg-indigo-900', 'bg-indigo-950',
  // Violet
  'bg-violet-50', 'bg-violet-100', 'bg-violet-200', 'bg-violet-300', 'bg-violet-400', 'bg-violet-500', 'bg-violet-600', 'bg-violet-700', 'bg-violet-800', 'bg-violet-900', 'bg-violet-950',
  // Purple
  'bg-purple-50', 'bg-purple-100', 'bg-purple-200', 'bg-purple-300', 'bg-purple-400', 'bg-purple-500', 'bg-purple-600', 'bg-purple-700', 'bg-purple-800', 'bg-purple-900', 'bg-purple-950',
  // Fuchsia
  'bg-fuchsia-50', 'bg-fuchsia-100', 'bg-fuchsia-200', 'bg-fuchsia-300', 'bg-fuchsia-400', 'bg-fuchsia-500', 'bg-fuchsia-600', 'bg-fuchsia-700', 'bg-fuchsia-800', 'bg-fuchsia-900', 'bg-fuchsia-950',
  // Pink
  'bg-pink-50', 'bg-pink-100', 'bg-pink-200', 'bg-pink-300', 'bg-pink-400', 'bg-pink-500', 'bg-pink-600', 'bg-pink-700', 'bg-pink-800', 'bg-pink-900', 'bg-pink-950',
  // Rose
  'bg-rose-50', 'bg-rose-100', 'bg-rose-200', 'bg-rose-300', 'bg-rose-400', 'bg-rose-500', 'bg-rose-600', 'bg-rose-700', 'bg-rose-800', 'bg-rose-900', 'bg-rose-950',
  // Slate
  'bg-slate-50', 'bg-slate-100', 'bg-slate-200', 'bg-slate-300', 'bg-slate-400', 'bg-slate-500', 'bg-slate-600', 'bg-slate-700', 'bg-slate-800', 'bg-slate-900', 'bg-slate-950',
  // Gray
  'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900', 'bg-gray-950',
  // Zinc
  'bg-zinc-50', 'bg-zinc-100', 'bg-zinc-200', 'bg-zinc-300', 'bg-zinc-400', 'bg-zinc-500', 'bg-zinc-600', 'bg-zinc-700', 'bg-zinc-800', 'bg-zinc-900', 'bg-zinc-950',
  // Neutral
  'bg-neutral-50', 'bg-neutral-100', 'bg-neutral-200', 'bg-neutral-300', 'bg-neutral-400', 'bg-neutral-500', 'bg-neutral-600', 'bg-neutral-700', 'bg-neutral-800', 'bg-neutral-900', 'bg-neutral-950',
  // Stone
  'bg-stone-50', 'bg-stone-100', 'bg-stone-200', 'bg-stone-300', 'bg-stone-400', 'bg-stone-500', 'bg-stone-600', 'bg-stone-700', 'bg-stone-800', 'bg-stone-900', 'bg-stone-950',
];

---

<Layout>
<div
  class="
    grid
    grid-cols-11
    gap-2
  "
>
  {colors.map((color) => (
    <div
      class={`
        ${color}
        aspect-square
      `}
    >
      <div
        class="
          text-sm
          bg-white/70
        "
      >{color}</div>
    </div>
  ))}
</div>
</Layout>

カラーパレットのデモページ

上記以外には黒(black)と白(white)が用意されています。
この2つにはカラーレベルはありません。

<div
  class="
    bg-black
    text-white
  "
>テキスト
</div>

黒と白のデモページ

色指定の後に/50のような指定を追加すると、色の不透明度を設定できます。

<div
  class="
    bg-sky-500/10
  "
>bg-sky-500/10</div>
<div
  class="
    bg-sky-500/20
  "
>bg-sky-500/20</div>
<div
  class="
    bg-sky-500/30
  "
>bg-sky-500/30</div>
<div
  class="
    bg-sky-500/40
  "
>bg-sky-500/40</div>
<div
  class="
    bg-sky-500/50
  "
>bg-sky-500/50</div>
<div
  class="
    bg-sky-500/60
  "
>bg-sky-500/60</div>
<div
  class="
    bg-sky-500/70
  "
>bg-sky-500/70</div>
<div
  class="
    bg-sky-500/80
  "
>bg-sky-500/80</div>
<div
  class="
    bg-sky-500/90
  "
>bg-sky-500/90</div>
<div
  class="
    bg-sky-500/100
  "
>bg-sky-500/100</div>

不透明度のデモページ

各色は「–color-XXX」の形でCSS変数として参照することもできます。

<p
  style="
    color: var(--color-sky-500);
  "
>CSS変数を使用</p>

CSS変数を使用するデモページ

新しく色を追加することも可能です。
今回はAstroを使用しているので、src/styles/global.css 内に以下を追記します。

@import "tailwindcss";

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

追加した色を試してみます。

<div
  class="
    bg-midnight
    text-white
  "
>midnight</div>
<div
  class="
    bg-tahiti
  "
>tahiti</div>
<div
  class="
    bg-bermuda
  "
>bermuda</div>

色を追加するデモページ

デフォルトのカラーパレットをすべて無効にした上で、独自のパラーパレットを用意することもできます。
src/styles/global.css 内で–color-*: initial を指定します。

@import "tailwindcss";

@theme {
  --color-*: initial;
  --color-blue: #42FFFF;
  --color-red: #C83C35;
  --color-green: #92F3A4;
}

<div
  class="
    bg-blue
  "
>blue</div>
<div
  class="
    bg-red
  "
>red</div>
<div
  class="
    bg-green
  "
>green</div>
<div
  class="
    bg-black
    text-white
  "
>デフォルトの色テスト</div>
<div
  class="
    bg-red-700
    text-gray-50
  "
>デフォルトの色テスト</div>

デフォルトの色は無効になり、その上で追加した色は設定されることを確認できました。
カスタムパレットのデモページ

参考サイト

Colors - Core concepts - Tailwind CSS

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tailwind CSSで色の設定を行う

サンプルコード

コメントを残すコメントをキャンセル

Category

Tag

Recent

Tailwind CSSで色の設定を行う

サンプルコード

関連記事

Astroで生成されるCSSを任意のファイル名にする

Astroでリダイレクトを設定する

Astroで動的なページを作成する

Tailwind CSSで動的にclassを作るとスタイルが適用されない

Astroでscriptを使用する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル