How to Install and Use Tailwind CSS and Vite in a Laravel Project

he'll win CSS hello everyone welcome back to my channel in today's video we are going to learn how to quickly and easy install to win CSS in a laravel 10 project so you know it is a fantastic utility first CSS framework that can help streamline your web development process so without further delay let's Dive Right In Another very first thing you're supposed to do is to create a lowerable projects so I have created one for hand and that is what we are going to work with all right so let me go ahead and save this project so let me run a command PHP artisan self and then just hit on the enter key oh okay so I made a typo PHP Artisan safe and this should create a local server for us to be able to preview our work okay all right so this is the link we are supposed to work with so I'm holding down the control and clicking on it like that okay so as you can see this is a fresh reliable project that has been created okay now we are going to get rid of all this and then see how best we can integrate still when into it all right so let me go back to my ID and then open the resources folder and then for this welcome page yeah I'm going to delete essentially everything okay I'm going to delete everything and then just create okay why okay am I not getting my Solutions there's so much processing going on laughs okay so you let me go back and I'll visit this one later let's go to laravel's I mean to win CSS official website and see what we can do over there so open your browser open a new tab and see Tailwind css.com and it's going to take you to the official page of to win CSS okay all right so once you're here just click on the get started click on the get started and it is supposed to take us to the installation instructions okay all right so here we are we are interested in what making use of a framework so you see you can install it here when using the CLI that is a command line interface using a post CSS framework guys and even using a CDN as a Content delivery network but we are interested in the framework so let's switch to the framework tab and then you look through whichever framework you want to select you will go ahead and select that we are interested in working with larval so this one here Laraway select that one and then there are a few instructions you need to follow the first thing you're supposed to make sure you do here is to create a layerable project we have done that already okay if you don't have I mean a project created make sure go ahead and do that and then make sure you are currently in that project so once whilst you're in our project you go ahead and run these few commands so let me copy this first command here npm install hyphengy that is a flag Tailwind CSS put CSS and then the auto prefixer so let's just copy this command and then go back to our project we're going to open a new terminal now you realize that in a project directory there isn't anything to win here okay all these files when you look through careful you can see that there isn't anything until win all right so let me create a new tab here I'm making a new terminal and then paste the command that I copied from the website okay so once this is installing let's go back and see what we are supposed to do next so the next command you are supposed to run is to initialize still win all right so let's copy this command as well come back to our ID once this is installing let's wait for it to finish okay let me go ahead and create a very basic HTML page Okay so I'll say let me generate the boilerplate for HTML this one and then change the title yes sir laravel and still win CSS all right so let me just create one Dev with a class called let's say container container like that then inside this let's just say we have um an H1 tag which is having Maybe a text welcome all right now we are going to test our CSS I mean after we are through integrating this still in CSS we are going to test this to see if it has been integrated successfully so I've saved this one let's go back to the side and see if the changes are just there like that so one I refresh you see that we are only having the text welcome it is taking a bit longer than usual okay so it is right here we are always in the text welcome okay see that the font style the look and feel is what just this one so after we are through integrating the Tailwind CSS you see that it is going to give us a different look let's go back and check the progress of our installation still running now if you are wondering how I'm able to execute all these commands I have a video where I demonstrated how to create your first laravel project in that sense there are a few tools you need to have installed on your computer and all that so I actually demonstrated how to get all those tools installed such as installing node.js I'm installing composer that is a dependency manager for PHP which allows you to install third party packages into your project I demonstrated how to install all those on your computer all right yeah so if this is your first time I mean trying to create a larger project I'm going to link that video in the description so you can check it out alright so the first command is true let's actually enter the second one which is npx to win CSS in it and then the flag hyphen P let's execute this one too and this has created what we call the towing that's config.js file for us okay all right so we are through with the um commands now let's go ahead and see what we are supposed to do next go back to the site now after we are true we need to configure our template part okay so let's copy let's say the whole of this here copy it go back to your ID and the file you're supposed to modify is the tailwind.config.js all right so let's just go open this file here so let me just squeeze this a little let me just overwrite all of this with the one I copied okay so this is essentially telling the system that any file that you find containing.blade.php go into it any file that contains a JS extension.view just look for them from the resources I wouldn't like that all right let's save this one go back to the site and see what we are supposed to do next now once you have been able to configure our Tailwind we need to copy is based classes or base files into a resources folder look for the CSS folder and then look for the app.css and then paste all of this in it so let's just go and do that okay so go back to our project so we should look for our resources CSS folder this one here and then look for this app.css and then just paste whatever we call it paste it like that all right let's save this one as well go back to the site and this is what we are supposed to run okay okay so let's run this command npm run Dev all right go back and then paste this command make this one a bit and then paste this command as well and then just hit enter and this is going to spin up another development server okay all right now let's go back to the site and check one more thing again now inside up let's say a bleed file okay we need to include this line of code here so let's copy it make sure it highlights and then you copy now let's go into our welcome.blade.php file here and then just beneath the title tile here I mean the title element let's just paste this all right now let's save let's save all of these files and then go back to our page and then refresh and as you can see there isn't anything new there isn't anything new what are we supposed to do again let's just go and test if um okay so it is actually working already you see you see so let's just make it more obvious I'll say that whenever you hover over this um welcome text so you need to proceed with the keyword class and then I'll see how so whenever I hover over this I'll say maybe BG let's say PG let's see right with um value of let's say 700. and then make sure this one is safe then let's go and then refresh so whenever we hover over this I expect some few changes to go on okay so that is not okay it's now loading you see so as you can see whenever we hover over this text here it is change the background of this entire text to the color that we specified let me also check one I mean add one more class let's see text to excel all right and see if this is going to take effect yes by the way if you like the video just go ahead and give it a thumbs up like the video and if you have not subscribed to the channel and you want to see more of my content go ahead and subscribe to the channel whatever your thoughts are leave them in the comment section and let's learn from each other I hope to see you again okay all right so you see that now the text size have been increased a little and whenever we hover over this give us just background like that and that is pretty how to integrate till when CSS into the larval project yes I hope you like this one I'll catch you in another one don't forget to like the video bye until then keep coding

Channel: Kode Leap

Views: 1,554

Keywords: #Laravel, #TailwindCSS, #CSSFramework, #Laravel10, #LaravelTutorial, #TailwindTutorial

Id: oNHi-c8utMk

Length: 15min 45sec (945 seconds)

Published: Thu Oct 05 2023