tailwind certain custom color not taking effect in laravel 8 welcome page

Question

I am trying to add a custom color to tailwind.config.js and use it as a background or text color but it is not taking effect. What is odd is I have added other custom color before into tailwind config, those are working fine only anything new that I try to add does not work. Here is my tailwind.config.js

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

module.exports = {

theme: {
   extend: {
        colors:{
            salmon: {
                th1: '#B03060',    
            },
            tuna: {
                th1: '#393B3E',    
            },
            wildblueyonder: {
                th1: '#768DAE',
            },
            xanadu: {
                th1: '#798578',
            },
            napa: {
                th1: '#AC9F8F',
            },    
            cararra: {
                th1: '#F6F7F4',    
            },
            kimberly: {
                th2: '#7A81A8',
            },
            shakespeare: {
                th2: '#53A7CE',
            },
            jordyblue: {
                th2: '#8CCBF3',
            },
            softpeach: {
                th2: '#FAF7F6',
            },
            softr: {
                th2: '#FAF7F6',    
            },
        },
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        },
    },
},
variants: {
    extend: {
        opacity: ['disabled'],
    },
},

plugins: [require('@tailwindcss/forms')],
};

Here is my view blade file code where I am using the color(text-salmon-th1) for text in the login a href tag.

 <div class="flex lg:justify-center">
                <label class="bg-tuna-th1">test</label>
                <a href="{{ route('login') }}"
                    class="inline-flex px-6 py-2 text-2xl font-semibold text-salmon-th1 transition duration-500 ease-in-out transform rounded-lg hover:bg-red-700 hover:to-red focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">@lang("Login")</a>
                <a href="{{ route('register') }}"
                    class="inline-flex items-center text-2xl px-6 py-2 ml-4 font-semibold text-white transition duration-500 ease-in-out transform bg-red-800 rounded-lg shadow-xl hover:to-red hover:bg-red-700 hover:text-white focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">@lang("Register")</a>
            </div>

I have tried clearing the cache of browser, clearing laravel view cache. Every time I change something in the tailwind config file I have tried "npm run watch" or "npm run dev". And I know tailwindcss is included in page because the other colors tuna, wildblueyonder e.t.c work only the new ones that I am adding including "salmon" does not work.

I have exhausted searching the reason for this.. .Any help will be greatly appreciated.

Answer 1

Ok , I feel stupid but I figured out why it was not working. It was because the public folder was one step above the current framework folder. And while I ran the "npm run dev" it created the public folder with app.css file inside wrong folder.

To fix this issue I had to change the code in webpack.mix.js and add the following line.

my path

/public_folder_name/
/framework_folder_name/

added this line to the webpack.mix.js file

 mix.setPublicPath('../public_folder_name/');