tailwindcss 色の定義をしたらデフォルトの色が使えなくなった

Posted at 2024-12-05

やりたいこと

Laravelでtailwindを使用。
色の定義をしたら

tailwind.config.js

export default = {
  theme: {
    colors: {
       'blue': '#003D7E'
    },
  },
};

すると
下記のようなデフォルトの色が使えなくなった。

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>

theme.extends.colorsを使用

tailwind.config.js

export default = {
  theme: {
    extend: {
      colors: {
        'blue': '#003D7E'
      },
    },
  },
};