CODEWITHSUNDEEP
phplaraveltailwind-csslaravel-mixlaravel-vite
Abel Chipepe
Abel Chipepe

Reputation: 462

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

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

Answers (1)

Abel Chipepe
Abel Chipepe

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:

  • 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.

Upvotes: 17

Related Questions