Laravel Tutorial for Beginners #7 - Adding CSS & Tailwind

Key Takeaways

okay then gang so in this lesson I want to add some styles to the application because currently it looks terrible so I'm going to show you how to do two things first we're going to add some vanilla CSS into the app.css file in the resources folder and that comes fully baited into the start project and second we're going to install tawin CSS which gives us a bunch of utility classes that we can use to quickly style a few extra things so then first of all how do we add just plain old vanilla CSS to AOW of project well you can just write it inside the app.css file over here for example I could maybe write a body selector and in that I could change the font family to Rubik now this is going to work for me because I've got Rubik installed on my computer but it might not work for you so choose a different font if you want but anyway let's also say that the background color of the body should be red just to see if this all works right so we've added a CSS Rule and some Styles but they're not going to be applied just yet because of two things first they're not actually being served up so the LEL Dev Server doesn't do that and second we're not linking to the app. CSS file from anywhere in the view so we need to fix those two things first up how do we have the CSS served up on a Dev server so that we can use them and also why doesn't the LEL Dev server which we're using to preview the application just serve them directly well it's because laravel uses vit for bundling and compiling front-end assets like CSS and JavaScript and so it's vit that also has to serve up the assets for use during development so you can see over here somewhere near the bottom of the file tree do we have a file called V.C config.js and if you open that up you're going to see this Lara plug-in which references the input locations of the frontend assets within the project and they're inside the CSS and JS folders within the Resources directory so we don't need to change this file it's already configured correctly for us so that V can serve up these files but we do need to run V itself so that it can serve these files to us and we can use them to do that we can come to the terminal and type npm run Dev now under the hood this runs the V command which spins up a local server with live reload to serve the assets from so then we generally keep the server running in the background as we make the application if we're applying styles to it all right so now the files are being served up and next we need to link to them now in order to do that we're going to use a special directive which is at V and then we pass in a path to the resource we want to use like the app. CSS file and what that does is allow blade and lell to work out the path to that resource for production and also for development so what we're going to do is go to the layout file over here and we're going to add this directive inside the head so to do this we say at V and then inside parentheses we do a path to the resource which is going to be into the resources folder then SL CSS then slapp CSS and now this would resolve to the path to that file again joint development this will work and also during production so let me copy this and save the file because I also want to put it inside the welcome uh template because this doesn't have the layout so I want the CSS to be applied in this file as well as in the layout file all right then so that's pretty much everything done now let's see if this works in a browser all right and now in a browser we can see that horrible red background so we know this is working now don't worry we will get rid of the red background shortly because it looks hideous but now we've hooked up the CSS so we can just start adding Styles now also we can use Tailwind CSS with LL projects out of the box that's if you're using a recent version of LL so if you are using a recent version when you scaffold a new LEL Pro using laravel new and then the project name then it comes preconfigured to work with twin CSS it has all the packages installed that it needs and also has all the configuration set up so we can just start using twin classes out of the box which is awesome if you're using an older version of larl then you will need to manually install tawin CSS and you can do that by going to the docs just searching for LL and there is a guide on how to do this right here so you just walk through all of these different steps now like I said said I'm using a recent version so we can just go ahead and start using Tailwind classes and actually inside the welcome view we already have a few CSS telling classes applied and that's what's causing all of this text to be Central on the page so I'm in the layout file right here and you can actually see these are the classes the towin classes applied to some of those elements we have text center right here which is taken effect and that's why we see the text centrally aligned on the page we also have classes applied to this anchor at the bottom now actually I added these classes prior to this lesson so you might not have seen me do this in fact you won't have seen me do these but they are there now and that's why we're getting that little bit of styling on the welcome page now what I'm also going to do is go to the app.css file going to get rid of this body selector and I'm going to paste in a bunch of styles I've already made now you can get these from the GitHub uh repository for the course files if you want to I just don't want to type them all out from scratch because that wastes your time and my time this isn't a CSS or Tailwind course if you want to learn more about Tailwind I've got a whole playlist about that and I will leave the link down below the video but anyway I've applied to uh some styles to some common elements within the site and by the way this is the way I'm working with Tailwind I'm using this apply directive right here to apply some Tailwind classes to common elements found around the website as well as some custom classes as well now the reason I'm doing this is for two reasons first off like I said I want to give the focus more on lar blade and all that kind of jazz so I don't want to go in all the templates and start adding the classes to the different elements that's going to waste time and secondly this is kind of how I like to work with Tailwind anyway where I'm grabbing all of the common elements like this that appear in multiple places around the website and I apply the tawin classes to them and then I can just sprinkle some extra tawin classes into the templates as we need them in my view if I have common elements where I'm using the same tawin class throughout different views in a website it makes no sense to keep repeating them over and over again in all those different views so I just make them once and then I just sprinkle some extra classes on top when I need them anyway we have styles for the body H1 H2 H3 ulp Etc also the header and the nav to apply a display of flex and then down here we have some for the form elements then we have some for the custom classes I've created so the container is from the layout file we have this main with the class of container that gives it a Max width right here the card and the Highlight classes they are from the card component over here so we give every card a class of card and then some cards a class of highlight right and that highlight class basically just gives it a border left which is red and then finally we have a button class which I will apply to various different anchor tags or buttons throughout the website and in fact one of those is inside the welcome page this one right here with a class of button all right all right so I'm going to save this now and when we preview this in the browser in a moment you're going to notice that it's just going to work out of the box and we don't need to do anything else we don't need to install anything because it's all preconfigured for us so if you go to the package.json file down here you'll see we have post CSS and tawin CSS already installed which is cool and also right down here at the bottom we've got this tawin Cod fing file which marks out all the different paths to the places we can use these Tailwind classes and that includes any blade files inside the resources folder so everything is already set up and ready to go also one more thing if you go to the top of this file then you might see little warnings under these things right here now to get rid of those warnings you will need to install a uh an extension and that extension is this one right here postcss language support so make sure you install that if you're getting some kind of warning under these things or these things right here all right then so now let's preview this in a browser all right so that's already looking a lot better on the welcome page let's go to the directory page and yeah that's looking pretty good we have the NAB bar up here looking nice we can go to the create page nothing there yet we will create that form later but on all ninjas if we click on one of these to view the details then again we go to The Details page but there's no template there just yet also notice these highlight class has taken effect on the Mario 1 so this is just highlighting ninjas with that high skill value awesome so now we have CSS and Tailwind applied to the project and in the next lesson we're going to move on to the database side of things and take a look at what migrations are