In this lesson, we will change our homepage and learn how Tailwind is pre-configured in Laravel.
We will create a website with three static pages:
- Homepage
- About us
- Contact
I asked ChatGPT to generate the HTML/CSS code for this quick demonstration. It did a good job!
I've put that code into a new Blade file with minimal changes to the footer date and route links.
resources/views/home.blade.php
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> <script src="https://cdn.tailwindcss.com"></script></head><body class="bg-gray-100 text-gray-900"><header class="bg-white shadow-md py-4"> <div class="container mx-auto flex justify-between items-center px-6"> <a href="/"><h1 class="text-xl font-bold">Brand</h1></a> <nav> <ul class="flex space-x-6"> <li><a href="/about" class="hover:text-blue-500">About Us</a></li> <li><a href="/contact" class="hover:text-blue-500">Contact</a></li> </ul> </nav> </div></header><main class="container mx-auto mt-10 px-6 text-center"> <h2 class="text-3xl font-bold">Welcome to Our Homepage</h2> <p class="mt-4 text-lg text-gray-600">Discover more about us and get in touch.</p></main><footer class="mt-10 py-6 bg-white text-center shadow-md"> <p class="text-gray-600">© 2025 Brand. All rights reserved.</p></footer></body></html>And then I changed the homepage route:
routes/web.php:
Route::view('/', 'home');And here's our new homepage:
Here's the GitHub commit for this change.
Tailwind: From CDN to Compiled Styles
In the Blade code, you may notice that Tailwind is loaded from CDN:
<head> <script src="https://cdn.tailwindcss.com"></script></head>This is not the best practice, right? We need to compile Tailwind classes locally to include only the ones that we actually use.
If you look at the default welcome.blade.php, there's a Blade if-statement for this:
<head> <!-- Styles / Scripts --> @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))) @vite(['resources/css/app.css', 'resources/js/app.js']) @else <style> /*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans ... </style> @endif</head>This means that if we have compiled CSS classes (i.e., if you have run npm run dev or npm run build), we load them via Vite. Otherwise, we just load Tailwind 4 from inline styles, listing only the classes we need for our homepage.
Laravel is pre-configured to work with Vite and Tailwind v4 automatically, so you don't need to install anything for it.
But, if we just copy-paste the same logic to our home.blade.php, it wouldn't work:
resources/views/home.blade.php:
<head> <script src="https://cdn.tailwindcss.com"></script> {{-- [tl! --] --}} <!-- Styles / Scripts --> @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))) @vite(['resources/css/app.css', 'resources/js/app.js']) @else <style> /*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans ... </style> @endif</head>If we refresh the homepage, it won't load our styles:
The reason is that we haven't re-compiled the styles.
Now, if we run npm run build:
We have our homepage styled again!
Notice: instead of running npm run build on every change, you can, of course, choose to run npm run dev and leave it running in the background, waiting for changes and re-compiling them automatically.
The final thing is that we don't need the welcome.blade.php inline styles on our new homepage. In fact, we don't even need that @if statement anymore because we know that we do compile our CSS assets.
So, this is the final version of our new home.blade.php head section:
resources/views/home.blade.php:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> @vite(['resources/css/app.css', 'resources/js/app.js'])</head>Here's the GitHub commit for this change.
And that's how you generally load Tailwind CSS in Laravel projects, with Vite compiling the assets.
Prefer Bootstrap Over Tailwind?
By default, Laravel homepage comes with Tailwind. But generally, there's no restriction: you can create your Blade file, load Bootstrap from CDN, and create your custom pages.
You can also use any other CSS framework or no framework at all.
In the previous version of this course, for Laravel 11, we had a lesson showing how to use Bootstrap simple blog theme in Laravel, so you can use that as an example reference.
In the next lesson, we will create "About us" and "Contact" pages. We will also learn how to use Blade layouts to avoid duplicating the header/footer on all the pages.
No comments or questions yet...