Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

esorone's avatar

Customer colours tailwind not working

Hi, everybody,

I'm converting some projects to Tailwindcss. Fine, nice to do then, but sometimes I run into issues.

I have my own color scheme and I can't get it to work.

I created it in tailwind.config.js. I've put it both under the standard colors but also under the heading Extend.

Below the example.

module.exports = {
    important: true,
    theme: {
        fontFamily: {
            display: ['Gilroy', 'sans-serif'],
            body: ['Graphik', 'sans-serif'],
        },
        extend: {
            colors: {
                 'kramp':  {
                    100: '#F7E6E6',
                    200: '#EBBFC0',
                    300: '#DF9999',
                    400: '#C64D4D',
                    500: '#AE0001',
                    600: '#9D0001',
                    700: '#680001',
                    800: '#4E0000',
                    900: '#340000',
                },
            },
            margin: {
                "96": "24 brake",
                "128": "32 brake",
            },
        }
    },
    variants: {
        opacity: ['responsive', 'hover']
    }
}

After this I turned npm and the colors are visible in app.css



.bg-kramp-100 {
  background-color: #F7E6E6 !important;
}

.bg-kramp-200 {
  background-color: #EBBFC0 !important;
}

.bg-kramp-300 {
  background-color: #DF9999 !important;
}

.bg-kramp-400 {
  background-color: #C64D4D !important;
}

.bg-kramp-500 {
  background-color: #AE0001 !important;
}

.bg-kramp-600 {
  background-color: #9D0001 !important;
}

.bg-kramp-700 {
  background-color: #680001 !important;
}

.bg-kramp-800 {
  background-color: #4E0000 !important;
}

.bg-kramp-900 {
  background-color: #340000 !important;
}

However, when I call the class, nothing happens.

<body class="bg-blue-500"> Boe </body> Works

<body class="bg-kramp-500"> Boe </body>, Nothing happens.

Does someone have any idea?

0 likes
8 replies
Sinnbeck's avatar

You have a syntax error in your js file

"kramp. {

Should be 
kramp: {
esorone's avatar

Thanks, Sinnbeck,

I think something went wrong with the copy past. In my config there is 'kramp': {

So unfortunately this did not solve my problem. Any ideas left?

Sinnbeck's avatar
Sinnbeck
6 years ago
Best Answer
Level 102

Check the developer tab and see if it shows to the right in the inspector (f12 and first tab)

Another thing is cache. Try clearing the file cache (ctrl shift delete)

esorone's avatar

I just found the error. The browser are still loading old css files, without the new Colors. I cleared all the caches, artisan optimise, but still the browser was keeping the old stylesheet in memory. I thought that clearing everything, should be enough, but obviously it wasn't. Thanks for your help.

Sinnbeck's avatar

A tip.

Use chrome.

  1. Open f12.
  2. Click the gear icon.
  3. Check disable cache when dev tools are open.

Now just always have dev tools open while working and cache will never be a problem

6 likes
mayanksdudakiya's avatar

Oh! God! After having 6 years of experience in IT. How can I make this kind of silly mistake haha? Thanks a lot :)

nyk's avatar

I've also written custom colors into my tailwind.config.js file. I'm running Laravel 8 with jetstream and my npm -v is 6.14.6. Esorone says they "turned npm" to apply their custom colors to their app.css file. What does that mean? I've read over the documentation and tried various things like npm build and the colors still don't show up in my blade files. Thanks.

esorone's avatar

Hello NYK,

I was in a hurry back then and I made lost of typo's in my initial post. But I meant.. When I run npm.. But deleting cache did the trick.

Please or to participate in this conversation.