Как заставить пользовательский цвет tailwindcss работать в Laravel 9

Я установил tailwindcss в проекте Laravel 9 и пытаюсь добавить собственные цвета. Затем добавил это в webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

Чтобы добавить собственные цвета, я добавил цвета в свой файл tailwind.config.js следующим образом.

const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    color: {
      transparent: 'transparent',
      current: 'currentColor',
      'blue': '#71BBE2',
      'orange': '#E28333',
      'black': '#242121',
      'gray': '#242121CC',
      'lemon':  '#C3D14A',
      'green': '#88B667',
      'lime': '#F8FFF4',
      'purple':  '#9D2883',
      'white': '#FFFFFF'
    },
    extend: {},
  },
  plugins: [],
}

У меня работает npm run watch, и я вижу, что микс laravel успешно скомпилирован. Теперь, когда я использую bg-orange в моем файле просмотра, как это

<nav class = "bg-orange">
    <div class = "mx-32 py-2">
         //....
    </div>
</nav>

цвет не отображается в браузере, и, глядя на инструменты разработчика, я не вижу цвет, добавленный к префиксу bg

<nav class = "bg-">
    <div class = "mx-32 py-2">
         //....
    </div>
</nav>

Есть идеи, в чем может быть проблема?