tailwindcssでカラーパレットをカスタマイズする方法

はじめに

大体以下に買いてあるのですが、tailwindcssを使う際「Teal」、「Cyan」の色が好きでとりあえずいつも入れようとするのですが忘れてしまうのでついでにカラーパレットをカスタマイズする方法をメモ。

前提条件

• tailwindcssが使える状態になっていること。
• tailwind v2.2.4

色のカスタマイズ方法

基本的にはtailwind.config.jsを編集することで色をカスタマイズします。

編集方法はデフォルトのカラーパレットを上書きする方法とデフォルトのカラーパレットを拡張する方法の2種類があります。

デフォルトのカラーパレットは以下の8種類 * 10段階 + transparent, current, black, whiteの84種類が使用できるようになっています。

• 色 (変数名)
  • Gray (coolGray)
  • Red (red)
  • Yellow (amber)
  • Green (emerald)
  • Blue (blue)
  • Indigo (indigo)
  • Purple (violet)
  • Pink (pink)

デフォルトのカラーパレットの上書き方法

tailwind.config.jsのtheme.colorsに設定を記述することでデフォルトのカラーパレットを上書きすることができます。

下の例ではbg-maroonやtext-maroonのようなクラスが生成され使用できるようになりますが、 あくまで上書きの設定となるためbg-blue-100やtext-indigo-300のような上記に含まれるカラーパレットが使用不可になってしまうので注意が必要になります。

チームで開発する際に、使用するカラーを制限したり、統一したりする場合にこの設定方法を使用します。

module.exports = {
  theme: {
    colors: {
      'maroon': '#8D2828'
    }
  }
}

カラーパレットを作成する際tailwindcssが提供しているカラーパレットをインポートしてカスタマイズする方法もあります。提供されているカラーは公式に カラーパレットリファレンス として記載されているので参照してください。 transparentとcurrentColorなどは文字列で指定しないといけないため指定忘れに注意してください。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      parimary: colors.red,
      secondary: colors.blue,
      maroon: '#8D2828'
    }
  }
}

デフォルトのカラーパレットも使用してカラーを追加したいという場合はカラーパレットを拡張する方法を使用します。

デフォルトのカラーパレットを拡張する方法

tailwind.config.jsのtheme.extend.colorsに設定を記述することでデフォルトのカラーパレットを追加することができます。

もちろんtailwindcssが提供しているカラーパレットをインポートして使用することもできます。 下記の例ではbg-red-100やtext-whiteなどtailwindcssが用意してくれているカラーパレットとbg-maroonやtext-maroonなどが使用できるようになります。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        maroon: '#8D2828',
        cyan: colors.cyan
      }
    }
  }
}

色の指定方法

色の指定方法はいくつかあり下記のように1対1で指定する方法とネストして指定する方法があります。

以下の場合はmaroonは1対1、blueはネストして指定しており、bg-maroonやbg-blue-light、text-blue-dark、bg-blueなどが生成されます。

注意しなければいけない点が1つありネスト指定の場合はDEFAULTキーはtext-blue-DEFAULTではなくtext-blueのようなものが生成されます。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      'maroon': '#8D2828',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      }
    }
  }
}

またネスト指定は1対1指定で定義することもでき、以下の2つは同じになります。

module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      }
    }
  }
}

module.exports = {
  theme: {
    colors: {
      'blue-light': '#85d7ff',
      'blue': '#1fb6ff',
      'blue-dark': '#009eeb'
    }
  }
}

余談ですがtailwindcssが提供しているカラーパレットは以下のようになっていので、bg-blue-50やtext-blue-900のように指定します。

module.exports = {
  black: '#000',
  white: '#fff',
  ...
  blue: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
  ...
}

まとめ

毎回調べていたのですが、自分でまとめてみるとバージョンアップして破壊的な変更がない限りは、カラーパレットのカスタマイズは調べなくてもできるようになった気がします。

それにしても良くできているなと思いました。