How To Install Tailwind CSS In Laravel

hello and welcome thank you for joining me we're going to go over how to use laravel and tailwind together laravel if you're not familiar with is a php framework and tailwind is a css utility first framework we're going to show an unstyled example component we're going to install tailwind and then we're going to show that example component all styled on my screen what i have is a blank larval project the only thing that i've done is a composer create project so it's a completely blank layerville project if we take a look at the browser you'll see that it's just the default laravel install default screen all right so let's get started first thing that we have to do is we're going to run npm install and that npm install is just going to install the components that laravel needs in order to build so for example one of those key pieces is laravel mix if you're not familiar with laravel mix it's a easy way to manage webpack it's a kind of a framework on top of webpack to just make it easier for us to manage so let's do it npm install now this can take a while depending on your machine there's a lot of things to install here okay looks like everything's been installed so let's go ahead and continue on so in order to get tailwind installed in our project we actually have to install a few more dependencies these dependencies are tailwind css post css and auto prefixer so just a simple npm install command with a dash d which tells our project that we want to install those as dev dependencies go ahead and install those okay great the next item that we have to do is an npx tailwind css init and this is going to create a tailwind config js file this file is important because this is what tells tailwind what to use when it's building the app css file so let's take a look at our project again after we've got this tailwind config.js file okay all right so now that we have the tailwind config file we're going to go ahead and open this up now this is the file that we're going to tell tailwind where to find the content so that it knows which css to purge if you're not familiar with purge what that means it's only going to generate the css that's actually being used in your project so that keeps your css file very small i'm going to go ahead and copy this from the docs on tailwind css all right great now that we've got that in there now the purge knows where to find the content and to use to generate the css files let's add a component with all the styles already added with the class and see what it looks like without tailwind installed so we're going to go ahead and we're gonna open up welcome and this is the the default view that comes with laravel and i'm gonna go ahead i'm gonna paste my components okay great i have the component pasted and let's actually take a look at the component that we're going to build all right this is the component that we're going to build so let's take a look at our default layer val now that we've pasted in the component that we're going to use i basically copied this style from a website so let's take a look at what this unstyled component looks like okay so it doesn't look like much it kind of has a little bit of styling but that's because laravel actually already comes with a little bit of styles installed so let's continue on with the install okay so now that we've edited our config.json the next thing that we have to do is require tailwind css in our webpack mix file the next thing we have to do is in our app.css we need to add three different items that tailwind requires in order to work that's tail and base tailwind components and tailwind utilities okay so now that we've got our app.css we actually need to run a terminal command and this is going to be an npm command that we run that tells taylin to build the css file so that command we need to run is npm watch this is going to watch for any changes in any changes in here so if we are changing something in there it's going to go ahead and it's going to regenerate that css file for us so anytime we're using something new it will add that to the css file all right the next thing that we have to do is back in our blade file we have to actually add the css file so like i mentioned earlier laravel comes with a little bit of styles so we're going to go ahead and remove this and we're going to add the css file that was generated okay so if we refresh our browser we now see that the whole entire thing is styled and that's how you install tailwind in laravel it's as simple as that thank you so much for joining me and i hope to see you in my next videos if you have any questions put them in the comments and i'd be happy to help like comment and subscribe for more awesome programming videos

Channel: EscoTech

Views: 18

Keywords: Laravel, Tailwind CSS

Id: lSa2LhRALE8

Length: 7min 16sec (436 seconds)

Published: Tue Dec 14 2021