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

こんにちは。nap5です。

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

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

GitHub - jhildenbiddle/mergician: Deep merge/clone JavaScript objects. Includ...

Deep merge/clone JavaScript objects. Includes options to inspect, filter, and modify keys/properties; merge or skip unique, common, and universal keys; and merge, sort, and remove duplicates from a...

GitHub

外部サイト

https://github.com/jhildenbiddle/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'),
  ],
};

デモサイトです。