Tailwind is super popular, so it felt a little bit weird not to cover it in the previous video. So in this one, we're going to very quickly install Tailwind CSS with Quasar. And again, when you're working with Quasar, you want to find the VEAT-related plugin. All right, let's scroll down the docs here.
We're using Vue. We don't need to create a project because we already have one. We want to install Tailwind CSS. Quasar actually already comes with PostCSS.
and it comes with auto-prefixer. So we only need this part of the code here. Opening up our terminal, yarn add-d towelwind-css. Now when that's installed, we can run npx towelwind-css and knit-p.
So I can just copy that directly and then paste it in here. We already have a post-css config, so it hasn't done anything there. but it did create a tailwind config file for us. Okay, moving down here, now we jump into our tailwind config, we can pretty much just copy paste this section here, because it does follow the structure of our application.
html file, this one here, and this pattern of jumping into the source directory, and then finding anything that ends with view, JS, etc. That also makes sense for our project. So that was an easy step. css file.
Now we don't have one of those. It works a little bit differently with Quasar. So we're going to jump into source, CSS, and we're going to create a file for Tailwind. css.
Now we can copy these parts here, paste them in. but we need to tell Quasar about the CSS file. css. So Quasar CSS supports SCSS, SAS, and CSS.
That's a lot of S sounds. Now the last step is to add the post CSS plugin. So let's come over here. js.
And we'll come up here and import Tailwind from Tailwind CSS. Now all we have to do is call that plugin here. So we add it to our plugins array. And now we're done.
Closing the server, starting it up again. Give that a second to run. And to test this properly, I'm going to disable UNO CSS. Because UnoCSS is actually compatible with Tailwind, so we don't want to get a false positive there.
Quasar config, and let's get rid of UnoCSS in our boot file, so it's not doing anything. So you can see that's reset what was happening with this select component. Back to the Tailwind install docs, if we scroll down a bit, they give you this example. So let's take that example, and then we'll go to our index page.
and just paste it probably inside of this div. And it works. If we get rid of underline, we can see that disappears, get rid of font bold. We're now using Tailwind in our Quasar project.
How easy was that? Pretty cool.