Why Laravel does not load Tailwind css styles installed with Laravel Breeze Starter Kit?

Question

I have a Laravel 8 project, with PHP7 and wanted to try out Laravel Breeze, but after installing according to Laravel Documentation, Tailwind styles are not being reflected on my login and register pages.

At the top of the page there is a broken script loading @vite('resources/css/app.css', 'resources/js/app.js')

I checked app.blade.php and guest.blade and found @vite('resources/css/app.css', 'resources/js/app.js') being loaded on the head section.

What is missing here? Do I need a different configuration to compile my assets?

Hip

Answer 1

After searching the web I found out that Laravel Breeze ships with Vite configuration, instead of webpack. And from https://laravel-vite.dev/ I found out that I did not have the minimum requirements to compile assets with Vite in Laravel:

• The Laravel package requires PHP 8.0 or greater.
• The Vite plugin requires Node 16.15.1 or greater.

I have PHP 7 and Node 16.15.0.

To solve the issue:

1- Update webpack.mix.js file with:

```
 mix.js("resources/js/app.js", "public/js")
      .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
      ]);
```

2- In app.blade.php head and guest.blade.php head in order to load tailwind css compiled and alpinejs replace @vite('resources/css/app.css', 'resources/js/app.js') with:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script defer src="{{asset('js/app.js')}}"></script>

3- Replaced tailwind.config.js content prop with

 content: [
         "./resources/**/*.blade.php",
         "./resources/**/*.js",
         "./resources/**/*.vue",
       ],

After npm run dev && npm run watch, there was light again.

Hip

This solution solved the immediate problem. Thank you! However, doesn't it seem weird that such a basic version-conflict issue should be clearer spelt out in the Starter Kit documentation? Or at the very least, there should have been a more intuitive error message. Terrible experience! – Devoe

Secondly, would this solution be robust enough to survive future automatic updates of app dependencies? – Devoe