Using Tailwind in Vue
Playing
01. Using Tailwind in Vue

Episodes

0%
Your progress
  • Total: 3m
  • Played: 0m
  • Remaining: 3m
Join or sign in to track your progress

Transcript

00:00
In this snippet I'm going to show you how to install Tailwind CSS with a fresh Vue CLI project. It's not really that tricky to do so let's get started with creating a new project. Of course if you don't have Vue CLI already installed you'll want to go over to the installation section but I'll assume you have it all set up. So let's head over and create a new project. I'm just
00:19
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
00:42
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
01:03
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
01:26
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
01:49
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
02:12
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
02:35
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
02:56
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
03:15
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
03:39
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.

Episode summary

In this episode, we walk through how to add Tailwind CSS to a brand new Vue CLI project. Starting off, you'll see how to spin up a new Vue app (assuming you've got Vue CLI installed), and then we jump right into installing Tailwind CSS as a project dependency.

We set up PostCSS so that Tailwind can be properly built into our app's styles, and you'll see how to create a simple PostCSS config file with the necessary plugins. After making sure nothing's broken, we organize our project files, create a new CSS file, and pull in Tailwind's base, components, and utilities with the appropriate directives.

Once everything's set up, we show two different ways to include your Tailwind CSS file in the project: importing it in main.js, or adding it directly in your App.vue's style tag. Both approaches work, and you'll get to decide which fits best in your setup. By the end, we test it out by adding a Tailwind class in your template and confirm it's working. That’s it—Tailwind is now fully set up and ready to use in your Vue project!

Episode discussion

No comments, yet. Be the first!