Build A Static File Blog with Laravel
Playing
02. A fresh project with Tailwind

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
So I'm starting out with a completely fresh Laravel project here, I've not done
00:03
anything else at all other than just install Laravel and I've used the Laravel installer to do this and I'll just call this Laravel static file blog because I'm using Valet, this is open in my browser and I'm just ready to start building. So the first thing that we're going to do is create our root controller and a view for our blog index and then we'll go
00:24
ahead and create our main overall layout for our blog then we will go ahead and install Tailwind but of course you can skip that if you want to style this up with something else. Okay so let's get started with our controller here and I'm just going to call this post index controller and let's head over to our web routes we'll just replace out this home route here with that post index
00:49
controller and that's done let's head over to our post index controller and we'll go ahead and just use an invoke magic method it's a pretty simple controller that's just going to return a view so let's say posts and index we can go ahead and create this file out so let's go over to our views create a posts directory and an index.blade.php file so let's just say index and we'll head over
01:14
and of course that's changed so we're going to go ahead and create out an overall layout for each of our pages we're going to do that not using standard blade layouts we're going to do that with a blade component so let's go and make out a component in here and we're going to call this app layout but I'm going to pass the view flag to this because we don't need a class associated with
01:37
this it's just going to be a plain component that we can inject our content into so that will have been created just over here under components and we can now use this on the page so let's just add a slot inside of here where our content is going to go so let's just use the slot variable and what we will see is if we head over to our index page here and we use this so we're just going to say
02:05
x app layouts that's what we've called it anything inside of here is going to be injected into that slot so if we give this a refresh of course it looks exactly the same but you can see it's now wrapped in that div and what we can do now is take say for example the welcome.blade.php file that comes with Laravel that has all of the structure here with the title of our app the font
02:28
everything that we need we can get rid of these styles we can just pretty much use this so I'm going to go ahead and copy this entire thing over to our app layout and then we can reintroduce that slot so let's get rid of pretty much everything in here that we don't need so we can get rid of these styles up here because they are specifically for the home page we can keep the font in here
02:48
although we can register that properly with Tailwind when we get to it we'll switch it out app title in a minute and for the body we can pretty much just get rid of all of this and go ahead and introduce our slot into here again so I think that should just be about it we are going to replace the title out as well in a second okay so now that we've got this let's just head over and
03:10
give that a refresh not much difference we've got a title we have got the entire structure here and now we can actually start to pull Tailwind in create out our overall container for our page and then just start to style stuff up so if you do want to use Tailwind let's head over to the docs let's go to the installing under the framework guide and let's hit Laravel so we of course have
03:33
already created a Laravel project we're just going to go ahead and use npm to install all of the Tailwind dependencies here so let's go ahead and run that let's check in now on what else we need to do so we need to generate our a Tailwind configuration file so once this is finished we can do that and start to pull this in okay that's all done let's go ahead and initialize
03:54
our Tailwind config file which is good and then in here what we need to do is specify where Tailwind is going to look for styles within our application so for us at the moment if we just head over to our Tailwind config.js file which is in the root of our project now really all we need at the moment is under resources and all files within all directories that end with blade.php so any
04:20
Tailwind styles we put in here will be placed into our overall style sheet so we don't end up with a huge style sheet that we don't really need so that's not going to have any effect on what we've got at the moment what we do need to do is go ahead and add in all of the Tailwind imports to app.css which is in the resources and css directory and if we come over now you'll notice it's still
04:43
not doing anything that is just because we need to go ahead and first of all run npm run dev to pull everything together but also include the vite import for our styles so let's go ahead and do that first of all that will be over in our app layout so we can do this just somewhere up here it doesn't matter too much and then we're going to go ahead and run npm run dev so what that will do
05:04
is we'll build everything together for us it will introduce hot reloading as well so we can keep this running and have a new tab for anything else we need to do and then our styles will be injected into the page so let's give this a refresh and there we go you can see that that looks already a lot nicer okay so let's start to build out that overall sort of wrapper for our entire app layout
05:25
so we'll open up app layout again and around the slot we want to include all of the styles that we need so let's go ahead and create out a div wrapper around here and let's just start to add some styles so we'll set a max width here of 2xl that will give us a nice thin container and we'll set a margin on the x-axis to auto essentially what that's going to do is just bring everything center
05:49
like we saw from the introduction and it makes it look a little bit cleaner now we can add a padding on the y-axis or a margin of 16 that's just going to pull everything down nicely so it's not right at the top of the page okay so at the top of the page i kind of want an anchor in here for our home page that we can click through to so this is going to say something like alex's blog we can
06:12
pull this directly from the app name so if we head over to emv we've got an app name to find out here and that's over in our config and app file so let's look for name and it's just here so we can reference our config file to pull this name through so we can just use the config helper and say app dot name and then sure enough we see laravel in here let's get rid of that index bit
06:36
of text over in our home page here and there we go okay so this anchor needs to go through to the home page so we may as well at this point go ahead and just add in a name for this so let's say hosts dot index and let's go ahead and use our root helper to go through to post dot index so wherever we are in our app now this is always going to be shown and we can just click through to go back to
07:04
the home page okay so let's add some styles to this and we will be on our way so we're going to set this as an inline block and let's go ahead and set the text to 2xl here we'll set the font to extra bold and let's go ahead and add in a hover here let's just check out what this looks like okay looks better let's add a hover so text blue 500 so we'll change the text to blue when we hover
07:32
and we'll add a transition on here for colors specifically and then we'll go ahead and set a duration of 100 so we get a nice transition when we hover over this just so we kind of know it's a link now the only glaring issue here at the moment is the font so we have over in our app layout here pulled in this font just here but we haven't applied that to tailwind just yet
07:55
so if we head back over to our tailwind config file we can go ahead and extend our theme to include a font family so we're going to go ahead and use the font family property in here we are by default using sans and for this we're going to go and pull in fig tree so let's define our fig tree in here and we want to extend the default theme because we don't just want to put this in
08:21
here so at the top of the page we're going to go ahead and import the default theme and that comes from tailwind css default and theme and then we can go ahead and use this to spread out the default font family and sans okay so that will include everything else that we need and that looks a lot better already great so what we can do now is just head over to our emv and change the app name over
08:50
to whatever we want so i'm going to call this alex's blog and i'm just putting this in double quotes because we are using spaces and a apostrophe in here okay there we go so let's figure out the main content section because at the moment over on our index if we just put something in here it's kind of going to sit next to this which is not really what we want so over in our app layout
09:12
just around the slot let's go ahead and wrap this in a div actually we could be a little bit more appropriate here and create out a main tag for this and we can go ahead and set the margin on the top let's say to 16 there we go so all of our main content for every page will sit here and we will have this link at the top that we can click through to go back to the home page

Episode summary

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.

Episode discussion

No comments, yet. Be the first!