tailwindでデフォルトのカラーを維持しつつ、カスタムカラーを追加する方法

環境

Laravel Mix v6.0.25

やり方

tailwind.config.jsに以下の部分を追加

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            black: colors.black,
            white: colors.white,
            gray: colors.coolGray,
            red: colors.red,
            yellow: colors.amber,
            green: colors.emerald,
            blue: colors.blue,
            indigo: colors.indigo,
            purple: colors.violet,
            pink: colors.pink,
            // カスタムカラーを追加できる
            primary: '#5c6ac4',
            secondary: '#ecc94b',
            // ...
        }
    },

colorsの下にカスタムカラーだけを追加すると、デフォルトの色が読み込めなくなってしまったので、別途デフォルトの色を定義しました。const colors = require('tailwindcss/colors')はデフォルトカラーを読み込むために必要。yellowがamberだったり、grayがcoolGrayだったりして少し紛らわしい。