Setup Tailwind CSS on Laravel Tutorial (2024)

hello everyone today I'm going to show you guys how you can install Telvin CSS on a fresh laudable installation it's a question I've been getting a lot in the comments and I thought I covered it on today's video so let's get started guys first step is for you to actually go ahead and create a lotel project or have an existing project to follow along I have already gone ahead and created a new lot project as you guys can see I have a fresh install over here so that's going to be the first step the next step is to actually open up this documentation page from the T CSS website we need it because there is there are a couple of commands that we need to run and I don't want you guys to memorize them it's best to always refer to the documentation and copy them here in case they change it's also easier they are quite long so I will have the link in the description but if you want to find it yourself either Google tailin CSS Lal or go to the tailin CSS website at the top navigation menu click on docs and then once you're inside the docs uh on the left side bar there is a quick search click on that and search for lot of well okay and you should be able to see this link click on it and Bam you are where we started okay so that's going to be the first step go to the documentation and create a new LEL project now on the documentation there are two guides one is for using wit and the other one is using Lal mix uh if I'm not mistaken since Lal 9 we had a switch to WID so I'm going to be using WID since that's the most upto-date version and many of you are going to be using WID so let's go ahead and follow along with that and next step is for us to actually install tailin Okay so there are going to be two commands that we are going to run the first one we will install tailing CSS post CSS and autofixer we need all these all these packages and then then second command is going to set up our config files okay so we need to go ahead and run both of these you can just click on this copy button on the right side so let's go ahead and run copy that and then move over to your project and paste it in the terminal so I will go ahead and do that paste it in hit enter it will go ahead and install that all right once the installation is done uh it will also go ahead and create two new config files for you so scroll down there should be two new files one called post css. config.js and tvind Doc config.js so open up this tail. config file this is going to be tailin config now we need to actually make some changes for it to work with lot ofal so go back to the documentation scroll down on step number three you can either copy the enter conf but for us we need to go ahead and copy this content section as you guys can see so I'm going to copy this move over to the config file and basically replace it with the content that is already there okay so by the end your config file should look something like this and all this does guys is it tells tailin where to find our blade or HTML files because telin tries to be smart and minimize our CSS file it only includes the CSS classes or utility classes that you're actually using but in order for it to do that it needs to actually go through all your HTML files in our case blade fils and see what you know CSS classes we have used so here we are basically telling them hey inside our resource folder which is going to be over here we are going to have a bunch of files that's what the star star does go through all the directories and then any file with blade. PHP extension withjs or view if you don't use vue.js or you don't have any JavaScript files you can take technically remove these but I'm going to keep them just in case I decide to add those later on in my project save that so that's going to be step number three next up we need to go ahead and actually import Telvin CSS in our app CSS file okay so go ahead copy these commands or these three lines of code I'm going to copy them go to your project on the resources CSS and then there should be a file called app. CS SS this always comes with a fresh Lal install open it up and paste these three lines that we copied over here okay these are going to basically import T in CSS for us so we can actually we will have access to them after that we basically just need to go ahead and run npm run Dev this will go ahead and compile all our CSS or if you have any JavaScript JavaScript assets minimize our CSS fils and make sure it's ready for production okay now this one is npm run Dev this is for development there is also another one called npm run build so right now I'm going to first do npm run build npm run build this will generate our JavaScript and CSS files for production but that requires you to run it every single time that you make a change if you do npm run Dev it will kind of set up a server a look for any changes and update your CSS and JavaScript files live okay so for now I'm going to go ahead and have it beev so it's looking for changes in the background and then after that we need to actually go ahead and include or add our CSS file using WID so the command is already over here it's going to be at WID or basically the V directive in Blade and then we need to tell it hey go ahead and include this app. CSS I'm just going to go ahead and copy this go to our uh blade file now if you have a template you need to add this to your template since I'm on a fresh a lot will install I'm going to add that on our welcome. blade. PHP file so this is it I'm going to remove everything so we can actually test this out so remove all of these I'll remove all the existing Styles so we know this is a fresh setup okay I'm going to paste that in and that's all we have to do okay and if I go ahead and I reload as you guys can see now we get a blank screen but the installation is done so to test it out we can go ahead and add some let's say text let me add here and I'm going to going to say test till wind and we can go ahead and add some classes let's say I do text uh gray 500 maybe we can give it a BG blue 500 and just like that let's save this because we already we were running npn run Dev it automatically detected other changes so right now if I go ahead and I make another change let's say I do border let's say gray 50 something like that it is going to automatically realize that we made some changes reload the page and also recompile our assets so now I will go back and I will do a Reload and as you guys can see the changes actually took effect let's change it from Gray to White so it's actually visible and as you guys can see it automatically updated it for us just like that so that's it guys we can do border two and now we have a border as well let's change the Border color to yellow and let's make it DLo 500 and as you guys can see now we have a border as well so that's the process guys uh just go ahead to the documentation and follow these steps create a new L project install tail vnd using npm add your blade files to the content section in the Tailwind config basically include tvind inside your CSS file or app. css file and then run npm run Dev or npm run build to compile the asset so on your local development you're probably going to need to run npn run Dev on production you want to run npm run build okay that's it guys I'm going to close this npm run uh Dev let's do that so I'm going to stop it now since I stopped it if I go back and and I reload we kind of lose everything so if I want to make sure this available there I have to go ahead and run npn run build okay and that's all we have to do all right so now if I reload as you can see it is done just like so hope you guys enjoy today's episode if you have any questions you can ask me in the comment section below again if you want to add any config you know uh changes to your tailin CSS just come over here in this config file and include them here even if you want to add dark mode or anything else you can just come and change it here and that's the process guys see you on the next episode have a great day bye

Channel: Yelo Code

Views: 5,992

Keywords: Laravel tutorial, Laravel tutorial beginners, Laravel livewire, laravel livewire tutorial, php, laravel tips, laravel tutorial, laravel for beginners, laravel database, laravel series, laravel php, php laravel, laravel validation, vs code, vs code plugins laravel, vs code plugins php, vs code extension, laravel vscode extensions, laravel extentions, laravel tailwind, tailwind css, laravel install tailwind css, laravel install tailwind, laravel vite, laravel 11

Id: RsviatVC7js

Length: 8min 38sec (518 seconds)

Published: Mon Mar 04 2024