Reputation: 462
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?
Upvotes: 8
Views: 5385
Reputation: 462
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:
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.
Upvotes: 17