Zenn
✨

TailwindCSSで色を追加する方法

2022/09/04に公開
Tailwind CSS
tech

TailwindCSSでの色追加は、さまざまな方法はありますが、今日は二つの方法を紹介したいと思います
以下の例を例えで記事を書きたいと思います

primaryというカラー名を追加しほしいです
カラーコードは#1D9A6Cです

既存のカラーパレットを利用

https://tailwindcss.com/docs/customizing-colors

このページから既存しているカラーパレットを確認することができます

はGreenと近いので、そのGreenのデフォルトの定義を変えて利用したいです

まずは#1D9A6CのShade Colorsを作成したいです
以下のツールサイトを利用してShade Colorsを出力します
https://hihayk.github.io/scale

そして、そのままgreenの定義を書き換えます

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          50: '#0A5137',
          100: '#0E6445',
          200: '#137752',
          300: '#18895F',
          400: '#1D9A6C',
          500: '#3FAC84',
          600: '#62BE9C',
          700: '#86CEB4',
          800: '#AADECB',
          900: '#CFEDE2',
          DEFAULT: '#3FAC84',
        },
      },
    },
  },
}

次は、primaryをcolors.greenとしてaliasを繋ぎます

tailwind.config.js
+const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          50: '#0A5137',
          100: '#0E6445',
          200: '#137752',
          300: '#18895F',
          400: '#1D9A6C',
          500: '#3FAC84',
          600: '#62BE9C',
          700: '#86CEB4',
          800: '#AADECB',
          900: '#CFEDE2',
          DEFAULT: '#3FAC84',
        },
      },
+     primary: colors.forest,
    },
  },
}

新しいカラーパレットを作る

既存のカラーパレットをそのままにしてほしいのやり方です
まずはcustomColorsというobjectを作成します

tailwind.config.js
const customColors = {
  forest: {
    50: '#0A5137',
    100: '#0E6445',
    200: '#137752',
    300: '#18895F',
    400: '#1D9A6C',
    500: '#3FAC84',
    600: '#62BE9C',
    700: '#86CEB4',
    800: '#AADECB',
    900: '#CFEDE2',
    DEFAULT: '#3FAC84',
  },
}

module.exports = {
  ...
}

そして、aliasを定義します

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
+       primary: customColors.forest,
      },
    },
  },
}

Discussion