Tailwind CSSで色スタイルの拡張設定をいじる際にはtailwind.config.jsのextendの中にcolorsを指定しないとダメな件

結論

任意のラベルで新しい色の定義を追加したい場合は、tailwind.config.jsのextendsの中にcolorsの定義を追加しないと、指定した色以外の色が使えなくなってしまうので注意

ダメな例

theme直下に定義するとその色しか使えないことになってしまう...

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts}"],
  // https://tailwindcss.com/docs/configuration
  theme: {
    colors: {
      'hoge': '#050505',
    },
    fontFamily: {
      poppins: ['Poppins', 'sans-serif'],
    },
  },
  plugins: [],
}

良い例

extends直下に書くことで既存の色を生かしたまま、新しい色の定義を追加出来る

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts}"],
  // https://tailwindcss.com/docs/configuration
  theme: {
    fontFamily: {
      poppins: ['Poppins', 'sans-serif'],
    },
    extend: {
      colors: {
        'hoge': '#050505',
      },
    },
  },
  plugins: [],
}

関連

tailwindcssでカラーパレットをカスタマイズする方法 | プログラミングノート