mergicianライブラリを使ってTailwindcssのカラーパレットを拡張してみよう

こんにちわ。nap5です。


mergicianライブラリを使ってTailwindcssのカラーパレットを拡張してみたので、紹介したいと思います。

mergicianライブラリはこちらです。

設定ファイルtailwind.config.jsに以下のように書いて

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
const mergician = require('mergician');

module.exports = {
  content: ['./src/**/*.{js,jsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
    colors: mergician(colors, {
      bebop: {
        // https://tailwindcss.com/docs/theme#colors
        // https://colorhunt.co/palettes/night
        100: '#001E6C',
        200: '#035397',
        300: '#5089C6',
        400: '#FFAA4C',
      },
    }),
  },
  plugins: [
    require('tailwindcss-no-scrollbar'),
    require('tailwind-capitalize-first-letter'),
  ],
};

このように指定すれば、bebopカラーパレットが完成です。

<h2 className="text-bebop-100">Bebop</h2>
<h2 className="text-bebop-200">Bebop</h2>
<h2 className="text-bebop-300">Bebop</h2>
<h2 className="text-bebop-400">Bebop</h2>

ただ、デフォルトでTailwindcssは上記のような拡張をサポートしているので、以下のようにしても同じ結果が得られると思います。

theme直下ではなく、extend直下に記載します。

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
const mergician = require('mergician');

module.exports = {
 content: ['./src/**/*.{js,jsx}'],
 theme: {
   extend: {
     fontFamily: {
       sans: ['Inter', 'sans-serif'],
     },
     colors: {
       bebop: {
         // https://tailwindcss.com/docs/theme#colors
         // https://colorhunt.co/palettes/night
         100: '#001E6C',
         200: '#035397',
         300: '#5089C6',
         400: '#FFAA4C',
       },
     }
   },
   // colors: mergician(colors, {
   //   bebop: {
   //     // https://tailwindcss.com/docs/theme#colors
   //     // https://colorhunt.co/palettes/night
   //     100: '#001E6C',
   //     200: '#035397',
   //     300: '#5089C6',
   //     400: '#FFAA4C',
   //   },
   // }),
 },
 plugins: [
   require('tailwindcss-no-scrollbar'),
   require('tailwind-capitalize-first-letter'),
 ],
};

デモでは以前の記事で使用したものを流用しています。

デモサイトです。

Have a nice day

デモコードです。

dank-resonance-706jsr - CodeSandbox

簡単ですが、以上です。