How to make tailwindcss custom color work in Laravel 9

Question

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 class="bg-orange">
    <div class="mx-32 py-2">
         //....
    </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 class="bg-">
    <div class="mx-32 py-2">
         //....
    </div>
</nav>

Any idea what the issue could be?

It should be colors not color section of tailwind.config.js — Ihar Aliakseyenka
– Ihar Aliakseyenka, Commented Mar 23, 2022 at 8:15
@IharAliakseyenka thanks for pointing the typo out. it fixed the issue — Mena
– Mena, Commented Mar 23, 2022 at 8:20

Maik Lowrey · Accepted Answer · 2022-03-23 08:19:21Z

2

Change color to colors.

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

answered Mar 23, 2022 at 8:19

Maik Lowrey

17.8k8 gold badges55 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make tailwindcss custom color work in Laravel 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related