I've come across a very strange issue working on a new project with the Laravel Livewire starter kit. It appears that Tailwind is not working out of the box?
After doing a fresh laravel new test command, selecting Livewire and Volt, and putting the following code into the welcome.blade.php, I'm finding that styles are not being applied, or being overridden altogether.
<h1 class="text-red-500 text-4xl">
Tailwind alive?
</h1>
The text is neither being rendered red or in 4xl size. I have also tried wrapping in <p> instead of <h1>.
What the heck is going wrong here?
In the Livewire Starter Kit, TailwindCSS is declared in ./resources/css/app.css. Based on a search of the GitHub codebase, this is injected into the DOM in ./resources/views/partials/head.blade.php.
./resources/css/app.css line 1 - GitHublaravel/livewire-start-kit search result for app.css - GitHub./resources/views/partials/head.blade.php line 13 - GitHubThe partials.head Blade file is included in the following files:
However, I see that welcome.blade.php does not reference any source that would point to the TailwindCSS you generated:
./resources/views/welcome.blade.php - GitHubIt only contains a fixed <style> element with hardcoded, pre-generated TailwindCSS code, which does not update when the content of welcome.blade.php is modified.
So, you need to include head.blade.php in welcome.blade.php to declare the necessary dependencies (recommended):
<head>
@include('partials.head')
</head>
And I would delete the current entire <head> section, keeping only the partials.head include, since they currently contain the same content except that partials.head dynamically injects the latest compiled CSS via Vite, while welcome.blade.php currently includes hardcoded CSS.
Or you can simply add @vite (instead of currently <style> element) on its own (although that would result in code duplication).
@vite(['resources/css/app.css', 'resources/js/app.js'])
Something like this is what I have in mind: