CODEWITHSUNDEEP
phplaraveltailwind-csslaravel-livewirevite
kalview
kalview

Reputation: 360

TailwindCSS with Laravel colors don't work

I'm using Laravel 9 with Tailwind (3.1.8) and LiveWire Powergrid.

While trying to change color of Edit and Delete button in Powergrid datatable only working class with colors is "bg-blue-[num]". I'm wondering why, because I've got the newest Tailwind version. Nothing is changed in tailwind.config.js under theme section.

Default function which creates a button at the last columns:

 public function actions(): array
        {
           return [
               Button::make('edit', 'Edit')
                   ->class('bg-blue-400 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
                   ->route('users.edit', ['user' => 'id']),
    
               Button::make('destroy', 'Delete')
                   ->class('bg-red-400 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
                   ->route('users.destroy', ['user' => 'id'])
                   ->method('delete')
            ];
        }

Result: enter image description here

Buttons "Delete" are white, but "Edit" are blue. Rest of colors also doesn't work.

I want to remind that I use also Vite.

Tried to use php artisan config:cache and clear but no results. There's any chance to handle that?

Upvotes: 0

Views: 1727

Answers (2)

kalview
kalview

Reputation: 360

@Ihar Aliakseyenka was right.

If you use PowerGrid and you surprisingly have half "styles" compiled you should check the tailwind.config.js.

Content section should be filled with paths to all directories (maybe I'm wrong) which uses TailwindCSS.

In my case PowerGrid table was configured and "drawn" via created component called UserTable.php inside App/Http/Livewire directory.

So I've put the relative path inside the config:

content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Http/Livewire/*.php',
    ],

After saving changes, Vite automatically loaded the styles and it started working.

If it couldn't please run npm run build and npm run dev.

Upvotes: 1

Matthew Page
Matthew Page

Reputation: 756

Run npm run dev to rebuild the CSS files

Upvotes: 0

Related Questions