going to call this Tailwind in Vue and let's just follow the instructions through. It doesn't really matter how you set this up the one thing that I would recommend is having all of your configuration files in separate files so it makes a lot more sense but if you don't the installation process should be pretty much similar. Okay so that's all finished let's go over to the Tailwind directory

and run npm run serve. What I'm also going to do is head over to a separate tab and I'm going to go back into that directory just so we can install any additional dependencies that we need along the way. Okay so of course the first dependency that we need to pull in is Tailwind itself so let's do an npm install on Tailwind CSS and just wait for this to finish and now that that's done let's head

straight over to our text editor and we're going to be using PostCSS to pull this in. So let's go and create a new configuration file in the root directory. This is going to be our PostCSS configuration file. Anything that we add to this will be added to PostCSS so this is just how we get the PostCSS config set up in a FreshView CLI project. So to pull Tailwind in we're going to go

ahead and export a new object from this file that we can add our plugins to and the plugins property here is just an array of plugins that you want to pull in. First thing that we're going to do is pull in our auto-prefixer that will go ahead and give us the ability to prefix any CSS for modern browsers and then of course we're going to go ahead and pull in Tailwind CSS. Let's just save

that out and head over to our browser just to make sure that we didn't break anything and sure enough our Vue.js app is set up and ready to go. Okay so the next thing that we're going to do is head over to our source directory here under assets and I'm going to create out a styles folder. Inside of here we're going to have app.css and this is where we can start to pull in all of

our Tailwind stuff. So what we want to pull in is the Tailwind base and we can use the Tailwind directive to do this so let's do that. Let's pull in the Tailwind components as well and let's also pull in the Tailwind utility classes as well. So all of that's over on the documentation so if you do work with Tailwind already or if you've just been looking through the docs then this is exactly

what it tells you to do. Now the last thing that we need to do is actually get this pulled into our application. So over in main.js there's a couple of ways to do this. The first way is to import this from here so we could say from the source directory we want to pull in assets and styles and app.css. That's one way to do it. Let's head over to the browser give that a refresh

and it looks like nothing's really changed. The only difference now is we can go ahead and add in a class here so for example bgblue500 and if we head over we should see that blue background. It looks like I probably set something up here incorrectly and sure enough I should have done module exports and there we go. So you'll notice a couple of alignment issues that's just because

of Tailwind's base kicking in and just adjusting things. So I just want to cover one other way that you can pull this in apart from importing it from here. You can actually take this url and go ahead and from your main app.vue file put in a style tag here and get rid of this. Self-close it and use the source attribute to define that you want to pull that in. If you come over you can see you

get exactly the same thing. So really that's just preference whether you import it over on main.js or you include it as a style tag in here. This is my preference because I feel it lives better a little bit over in app.vue but it's entirely up to you. So there we go there is Tailwind pulled in to a fresh Vue CLI project.