Tailwind background color class didn't automatically compiled when using laravel component

Question

Hello i found its very weird that my tailwind bg color class didn't automatically compiled It needs to be some initiation before it will compiled. I'm using vite to compiled my asset with laravel 11, tailwind 3.4 and flowbite library Note : I already run the

npm run dev

Here's my tailwind config :

export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./node_modules/flowbite/**/*.js"
    ],
    darkMode: 'class',
    theme: {
    extend: {
        colors: {
            primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
        }
    },
    },
    plugins: [
        require('flowbite/plugin')
    ],
}

Laravel blade component :

<button
    {{ $attributes->merge([
        'class' => 'inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-'.$color.'-700 rounded-lg focus:ring-4 focus:ring-'.$color.'-200 dark:focus:ring-'.$color.'-900 hover:bg-'.$color.'-800',
    ])}} >

    {{ $slot }}
</button>

Laravel class component :

{
    public $color;

    /**
     * Create the component instance.
     */
    public function __construct(
        $color = 'blue'
    ) {
        $this->color = $color;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.button');
    }
}

If i directly write the blade on my view like below, it won't be compiled :

<x-button type="button" color="red" @click="addNewRow()">+ Add Row</x-button>

but after i write the element without blade component, the background color will get compiled both the blade component and the regular html element

<button class="bg-red-700">Pink</button>

<x-button type="button" color="red" @click="addNewRow()">+ Add Row</x-button>

How can I solve this ?

Answer 1

Tailwind only generates the classes that are found after crawling your template files. When using dynamic classnames the finally rendered classname is not known to tailwind.

One way to solve this problem is safelisting the classnames you are building: https://tailwindcss.com/docs/content-configuration#safelisting-classes