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'),
],
};デモでは以前の記事で使用したものを流用しています。
デモサイトです。
デモコードです。
簡単ですが、以上です。