Tailwind CSS のカラーパレットをカスタマイズする

1. はじめに

Tailwind CSS は，合計 220 色のカラーパレットがデフォルトで提供されています。また，tailwind.config.js を編集することによって，カラーパレットをカスタマイズすることが出来ます。本記事では，Tailwind CSS のカラーパレットをカスタマイズする方法について記述します。

2. 上書きと拡張

Tailwind CSS のカラーパレットをカスタマイズする方法として，デフォルトのカラーパレットを上書きする方法と，デフォルトのカラーパレットを拡張する方法が挙げられます。下記のように，root ➔ theme ➔ colors の直下にカラーネームとカラーコードを設定することで，デフォルトのカラーパレットを上書きすることが出来ます。下記の例では，bg-regal-blue や text-regal-blue などの設定したカラーパレットが使用可能な状態になります。しかし，
bg-black や text-white などのデフォルトで設定されているカラーパレットが使用不可の状態になることに注意が必要です。

1
module.exports = {
2
  theme: {
3
    colors: {
4
      'regal-blue': '#243c5a',
5
    },
6
  },
7
}

root ➔ theme ➔ extend ➔ colors の直下にカラーネームとカラーコードを設定することで，デフォルトのカラーパレットを拡張することが出来ます。下記の例では，上記の例とは異なり，bg-regal-blue や text-regal-blue などの設定したカラーパレットに加え，bg-black や text-white などのデフォルトで設定されているカラーパレットも使用することが出来ます。

1
module.exports = {
2
  theme: {
3
    extend: {
4
      colors: {
5
        'regal-blue': '#243c5a',
6
      },
7
    },
8
  },
9
}

チームで開発する際に，使用するカラーパレットを統一する場合は上書きを，それ以外の場合は拡張でカラーパレットをカスタマイズするのがベストプラクティスだと思います。

3. カスタムカラー

上記の例では，カラーネームとカラーコードを 1 対 1 で設定しましたが，下記のようにネストして設定することも出来ます。下記の例で重要なのが『修飾子なし』を表す DEFAULT キーです。下記の設定でビルド処理を行った場合，*-blue-light や *-blue，*-blue-dark は生成されますが，*-blue-DEFAULT は生成されません。

1
module.exports = {
2
  theme: {
3
    colors: {
4
      blue: {
5
        light: '#85d7ff',
6
        DEFAULT: '#1fb6ff',
7
        dark: '#009eeb',
8
      },
9
    },
10
  },
11
}

4. キュレーションカラー

上記のようにカラーネームとカラーコードを設定する方法の他，下記のように Tailwind CSS が提供しているカラーパレットをインポートしてカスタマイズする方法もあります。提供されているカラーパレットは，公式のカラーパレットリファレンスを参照して下さい。

1
const colors = require('tailwindcss/colors')
2

3
module.exports = {
4
  theme: {
5
    colors: {
6
      transparent: 'transparent',
7
      current: 'currentColor',
8
      black: colors.black,
9
      white: colors.white,
10
      gray: colors.trueGray,
11
      indigo: colors.indigo,
12
      red: colors.rose,
13
      yellow: colors.amber,
14
    },
15
    extend: {
16
      colors: {
17
        emerald: colors.emerald,
18
        violet: colors.violet,
19
        rose: colors.rose,
20
      },
21
    },
22
  },
23
}

5. おわりに

ここまで，Tailwind CSS のカラーパレットをカスタマイズする方法について記述してきました。Tailwind CSS では，ハイクオリティなカラーパレットがデフォルトで提供されているため，ベースカラーやブランドカラーが設定されていないプロジェクトでも，スムーズに開発を進めることが出来ます。