0

I'm new to Laravel Breeze and tailwind.

After successfully installed Laravel Breeze and looking at /login page source, I couldn't match the source code and actual page source and would like to know what's going on.

In app.blade.php or guest.blade.app there are the following lines.

    <!-- Styles -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

But when viewing login page source, it has

    <!-- Styles -->
    <style>
        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent} ...
     </style>

    <style>
        body {
            font-family: 'Nunito';
        }
    </style>

And no javascript is loaded.

I'm expecting to see just the link to public/css/app.css and public/js/app.js but no such thing here.

So if anyone can explain how Laravel Breeze works regarding to including css and js
and how I can extend tailwind css to other pages and use js in other pages, I'd really appreciate.

Anurat Chapanond
  • 2,837
  • 3
  • 18
  • 31

1 Answers1

0

You need to compile the assets installed with Breeze. To do so, just run the following commands on your project directory:

npm install 
npm run dev

If you check the Public folder on your Laravel app, you should see the CSS and JS compiled. Refresh the page, and the style should look OK.

Documentation reference: https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation

Pablo Lugo
  • 1
  • 1