Twinkle

tailwind(v3)でカラーを簡単に切り換える

LaravelのスターターキットBreeze/Jetstreamではメインのカラーはindigoが使われている。カラーを変えたい時にhtmlのindigoを全部書き換えるなんて面倒なことはしたくない。

tailwind.config.jsのtheme.extend.colorsで上書きすれば一括で変更できる。indigoが全部orangeに変更される。逆にindigoは使えなくなるのでindigoも使いたい場合は別の名前でindigoも作るなどして工夫する。

/** @type {import('tailwindcss').Config} */
module.exports = {
    //

    theme: {
        extend: {
            colors: {
                indigo: colors.orange
            },
        },
    },