Introduction to Styling with Tailwind CSS
Alright then my friends, so now we've seen a few of the building blocks to make up this site so far. So we've seen how to use Nuxt links, layouts, page components, etc. And currently, the whole site looks absolutely garbage. There's no styles except for these links right here. So let's make it look a little bit nicer in this lesson. But we're not going to use regular CSS, nope. We're going to use instead Tailwind CSS.
So I think most people watching this will know that Tailwind CSS is a CSS utility library that we can use to quickly add styles to our website using all those different utility classes. A bit like Bootstrap, but without as many ready-made components, and instead comes chock-full of utility classes to control things like spacing, font colors, borders, etc. Now, I don't want this to be a big tutorial about Tailwind CSS. If you want to know more about it, I've got a full Tailwind CSS tutorial available, and I'll leave the link to that down below the video.
What I do want to do is show you how we can easily integrate it with a Nuxt application. And also, later in the course, I'll be showing you how we can integrate other external libraries like Material Icons. But for now, let's stick with Tailwind.
Installing and Configuring the Nuxt Tailwind Module
Next comes with the ability to add modules, which basically extend the features of the application. Now, there's loads of different modules that we can use for different things, like Axios for fetching data or Pinia for state management, Storybook for UI development, etc. The module we want to use is Tailwind. So if we click on that, it's going to take us to the docs for the Tailwind module. And then from there, if we click on 'Get Started', it should show us how to set up the module in a Next application. So it's really, really simple.
We just need to install the package using either yarn or npm. Then we add the module to the NUXT config file. And then finally, we can optionally create a Tailwind config file using tailwind init. It also says down here that we can create our own Tailwind file for if we want to extend it by adding more styles or Tailwind components. And to do that, the path to this file should be inside an assets folder, then in a css folder, and the file name should be tailwind.css.
So let's set this up now in our application. Okay then, so first of all in the terminal, let's install this. I'm going to cancel out of the current process, then clear this to give me some room. Then I'm going to paste in the command we need to use: npm install --save-dev @nuxtjs/tailwindcss. So let's press enter now to install this.
Okay, and now that's installed, we can cross off here and then go to your Nuxt config file. And inside this defineNuxtConfig function, inside this object, we want to add a modules property. So this is where we declare any extra modules that we add to the application, inside an array where each value is a string value. So the one that we want to add is called @nuxtjs/tailwindcss. And now that's pretty much it. Our application is configured to use Tailwind CSS.
Applying Utility Classes to the Default Layout
And we can go ahead and we can start using some classes inside our different components. All right, so what I'm going to do is open up the default layout and just add some Tailwind classes to this file. So let's go to the header first of all and say class is equal to something. And I'm going to apply the class of shadow-sm. So these are just Tailwind classes. And also bg-white to give it a background of white. And again, if you want to learn more about Tailwind, because this is not going to be a big tutorial about Tailwind, definitely check out my Tailwind course. The link to that is going to be down below the video.
So we apply a few classes to the header. Next, I want to apply classes to the nav. So let's say class is equal to... and then we want this to be a container, and then mx which is margin X, we set to auto so it sits in the middle. p-4 to give it some padding. We want to display this as flex as well and say justify-between. So that spaces these items out, so that the space between this and this. In essence, this is going to sit on the left and this on the right.
All right, let's also apply classes to the Nuxt link. So let's say class is equal to something and then this is just going to be font-bold and that's all we need for this. The ul will apply a class to that as well because I want this to display as flex, so we'll say flex and then also gap-4 and that gives us a gap between each of the flex items so they're all going to sit next to each other.
All right, so down here for this div where we have the actual page content, I'm going to give this a class as well. And the class is going to be container and also mx-auto, so margin X auto that is, and also give it some padding by using p-4. And that will do for this template.
So what I'm also going to do is add some classes to the products template, but this time around I'm going to speed it up so you don't have to watch me type all this out.
Previewing the Styled Application
All right, so now I've added all of those classes, what I'd like to do is preview this. So open up the terminal, spin up the dev server by typing npm run dev.
All right, so in a browser, we can already see this is looking a lot better. The navbar looks pretty cool and we have the content down here. We can flip between these different pages. If we go to the products page, then it's looking a bit nicer as well. If we go to a specific product like 123, we can see all of this taking effect. So it's not going to win any design awards, this, but at least it's looking a little bit better now.
Extending Tailwind with Custom CSS
Now remember before on the docs, it said that we could basically extend Tailwind and add extra classes and components by adding the tailwind.css file. And that needed to be inside an assets folder in the root directory. So let's create that first of all, and then inside there a css folder, and then inside there tailwind.css.
So now inside here, what we could do is import all of the different parts of the Tailwind library. So I'm going to paste those in. So we have the base part, the components, and the utilities. And then now inside this file, if we wanted to add extra classes, we can do. For example, I could add a body selector right here. And then I'm going to use the @apply keyword from Tailwind and we can apply different classes now, different utility classes to the body. For example, I could say bg-gray-50. So that's going to give it a very light gray background color.
We could also add extra components, and to do that I could say @layer components. This is how we add extra components in Tailwind. And then I could add a .btn selector. So we give anything that wants all of these classes, or rather styles that I'm going to create in a second, the btn class. And we're going to use @apply again to apply some classes straight from Tailwind. And I'm going to copy these from my repo and paste them in just so you don't have to watch me type them out. So we give it an arbitrary value for the background color, which is this green color right here. Then we say text-white, and then px-3 and then py-2. So we give it padding in the X and Y direction. It's rounded at the corners, the text is small, and the text is white as well. So I'm going to save this.
Applying Custom Styles and Final Review
Now what I am going to do also is open up the terminal. I'm going to cancel out of the process just for good measure and I'm going to start it again so it can pick up this file.
And then once I've done that, inside here now, I want to go and use this btn class somewhere. So let me do that. I'm going to go over to the default layout, and then I will apply a class to this right here of btn. So we can add that component to this particular link. And let's see what this looks like in the browser.
So then in a browser, that's all looking pretty good. The styles have taken effect. The body background is now that very light gray and offsets against the white in the nav pretty nicely. Also, we have this link at the top with a class of BTN which applies those extra styles. Awesome, so this is all working. And that's how we use Tailwind CSS with Nuxt using the Tailwind module. We will be using Tailwind a little bit more in the future through the rest of this course to apply different utility classes to our templates.
