In this episode, we're kicking things off with a brand new Laravel project—no fancy setup, just a fresh install using the Laravel installer. The goal? Start building a static file blog from scratch, styled with Tailwind CSS.
We begin by creating the core structure: making a root controller for our posts, hooking it up to a route, and generating the basic view. Rather than using Blade layouts, we opt to use a Blade component for our main app layout for some extra flexibility.
Next up, we move over some basic HTML structure from Laravel’s default welcome.blade.php
, tidy things up, and get ready to bring in Tailwind. We go through the full install process for Tailwind CSS via npm, set up the config to make sure Tailwind processes our Blade files, and add the necessary imports to our main CSS file. A quick npm build and we’re live—Tailwind working and ready to go!
Tailoring the design, we add a container with some nice max-width, margins, and padding for a centered look. We dynamically display the app name from the config (and show how to customize it). For the main layout link at the top, we style it up with Tailwind classes and a hover effect for a nice interactive feel.
Finally, we extend the Tailwind config to include the Figtree font for a polished look, and ensure our main content area sits perfectly with plenty of breathing room. By the end of this episode, you’ll have a slick Tailwind-powered layout in Laravel, ready to add your content.