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?

Abel Chipepe · Accepted Answer · 2022-09-18 10:45:10Z

17

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.

edited Sep 18, 2022 at 10:45

answered Jul 9, 2022 at 12:08

Abel Chipepe

4625 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ifedi Okonkwo Over a year ago

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!

Ifedi Okonkwo Over a year ago

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

Mash tan Over a year ago

After all these years, the documentation STILL has this issue. Thanks, you saved me two hours of headache. What I dont get is why suddenly 'breeze' forces me to use vite to compile. Mix works just fine for every other project. And I dont want vite or any other bvllsh|te just to make a login template. Guess the age old tradition of "no one updates the documentation" is true even now lol.

Abel Chipepe Mar 5 at 16:15

@Mashtan Laravel Mix uses webpack which is mostly an outdated js bundlers. Vite is the new sheriff in town. Vite is faster and has more support for modern Js features. So, to move forward webpack had to go.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related