How to make tailwindcss custom color work in Laravel 9-CodePudding

I have installed tailwindcss in a Laravel 9 project and trying to add custom colors. Then added this in 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"),
    ]);

To add the custom colors, I have added the colors in my tailwind.config.js file like this

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: [],
}

I have npm run watch running and I can see that laravel mix compiled successfully. Now when I use bg-orange in my view file like this

<nav >
    <div >
         //....
    </div>
</nav>

the color does not show in the browser and looking at the dev tools I cannot see the color appended to the bg prefix

<nav >
    <div >
         //....
    </div>
</nav>

Any idea what the issue could be?

CodePudding user response：

Change color to colors.

 theme: {
    // the line below
    color: { ...