最低限のtailwindcssカスタムテーマ作成

はじめに

tailwindcssを使ってUIを構築する際に初期で用意されているカラー以外に、
メインカラーやセカンダリカラーを適用したいことが少なからずあります。
毎回忘れるので備忘録として残しておきます。

tailwind.config.jsに設定値を追加

tailwind.config.jsに下記のようなカラーオブジェクトを足します。

{
  theme: {
    extend: {
      colors: {
        primary: {
          100: "var(--color-primary-100)",
          200: "var(--color-primary-200)",
          300: "var(--color-primary-300)",
          400: "var(--color-primary-400)",
          500: "var(--color-primary-500)",
          600: "var(--color-primary-600)",
          700: "var(--color-primary-700)",
          800: "var(--color-primary-800)",
          900: "var(--color-primary-900)",
        },
        secondary: {
          100: "var(--color-secondary-100)",
          200: "var(--color-secondary-200)",
          300: "var(--color-secondary-300)",
          400: "var(--color-secondary-400)",
          500: "var(--color-secondary-500)",
          600: "var(--color-secondary-600)",
          700: "var(--color-secondary-700)",
          800: "var(--color-secondary-800)",
          900: "var(--color-secondary-900)",
        },
      },
    },
  },
}

共通cssに適用

tailwind.config.jsで設定したcssカスタムプロパティ変数を共通cssに書き込みます。

:root {
  --color-primary-50: #fffedd;
  --color-primary-100: #fcf6b3;
  --color-primary-200: #f8ec85;
  --color-primary-300: #f6de56;
  --color-primary-400: #f3e229;
  --color-primary-500: #d9d711;
  --color-primary-600: #a0a909;
  --color-primary-700: #6b7904;
  --color-primary-800: #394800;
  --color-primary-900: #141a00;

  --color-secondary-50: #fffedd;
  --color-secondary-100: #fcf6b3;
  --color-secondary-200: #f8ec85;
  --color-secondary-300: #f6de56;
  --color-secondary-400: #f3e229;
  --color-secondary-500: #d9d711;
  --color-secondary-600: #a0a909;
  --color-secondary-700: #6b7904;
  --color-secondary-800: #394800;
  --color-secondary-900: #141a00;
}

カラージェネレーターなどを使って好きなカラーを適用しましょう!!
https://smart-swatch.netlify.app/

あとは使うだけ

<h1 class="text-primary-500">メインカラー</h1>
<h2 class="text-secondary-500">セカンダリカラー</h2>