Tailwind with Nuxt.js
Playing
01. Tailwind with Nuxt

Episodes

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

Transcript

00:00
Tailwind is a fast-growing, utility-first CSS framework, which if you've clicked on
00:06
this snippet, I assume you've at least heard of or are using at the moment. And in this snippet, we're going to look at integrating this into the Nuxt framework. So we're going to look at doing this in kind of a different way to if you Google this, there are pre-built solutions around, there are packages that will do this, example projects.
00:29
What we're going to be doing is installing this all manually. I found this the best option, easiest to configure, and easiest to get quickly set up with. So let's go ahead and create a fresh Nuxt project. And you'll actually see when we go ahead and run the npx create-nuxt-app command, and I'm
00:49
just going to pop this in a directory called nuxt-tailwind, throughout the installation process, we'll actually get the option to use Tailwind as our CSS framework. We're going to ignore that, and we're going to do this manually. Like I said, what we want to do is look at potentially putting this into a existing project
01:08
as well. And I much prefer doing this manually, and then, of course, it gives me more control. Okay, so now that all of that stuff is finished, we're going to go ahead and give this a project name and description, choose the author name.
01:19
I'm using NPM here. The UI framework, as I mentioned, does include the ability to use Tailwind CSS, but we're going to choose none. We just want this to be nice and plain, ready to manually install.
01:32
We're going to not choose a custom server framework. We're not going to use any modules here. We're not going to use any linting tools. We're not going to use a test framework, and we're going to go for the universal server-side
01:44
rendering option here, and just wait for our NPM packages to be installed. Okay, great. So now that's all done. Let's go into our Nuxt Tailwind project and run NPM run dev, wait for this to load up,
01:57
and we'll head over to localhost 3000, and just wait for the client and server bundle to compile. Okay, so there is our project, and the goal of this is literally just to be able to get Tailwind installed, and maybe just change the background color of this component.
02:13
We're not going to be fiddling around with things too much or going into any of the Tailwind functionality. So the first thing that we wanted to do then is just open a new tab, go into the Nuxt Tailwind directory just outside of this, and we're going to go ahead and install Tailwind.
02:30
So we're going to do an NPM install on Tailwind CSS, and we're just going to save that either to our main or dev dependencies. It doesn't really matter too much, and let's just wait for that to finish. Okay, now that's pulled in, let's head over to our text editor and look at how we want
02:45
to set up our styles. Generally what we would do is use something like SAS. And I'm going to create an app.scss file inside of a styles directory inside of assets. And what we can do with this is head over to our Nuxt configuration and pop this in
03:01
the global CSS section just here. And if you are just using Tailwind CSS, you're writing no custom CSS whatsoever, or if you're just doing this inside of your components separately, this is going to work nicely. So let's go into assets, styles, and app.scss.
03:18
And then over in app.scss, what we can do is we can pull over the Tailwind utility. So let's go and click Get Started on here, and pull in the base components and utilities just into here and save this out. And that's pretty much all we need to do, that'll all be loaded in.
03:34
Now you'll notice at this point, if you are setting up a fresh project, or if you're not using SAS, it says that the module isn't found. Now that is not the case. All that's happening here is we need to go ahead and install node SAS and SAS loader
03:46
because we need to be able to process SAS files. So I'm going to go ahead and do an npm install, save these both to our development dependencies, so node SAS and SAS loader. And once that's done, this should work.
04:00
Okay, so that looks like it's done. We should now be good to go. We just head over to here and give that a refresh. That looks like it's all working.
04:08
And we now technically have Tailwind installed, but you're going to need to generate a configuration file. You can manually create these, or because you've already installed Tailwind, you can use npxtailwind and then just say init inside of the directory that you run this, that will create a Tailwind
04:25
configuration file. And I'm sure in the future, this will come with other options as well, other things that you can do. So this is basically our Tailwind configuration file.
04:34
We need a point to this in case we want to extend the theme, add any variants or install or create any of our plugins. So over in nuxt.config.js now, what we want to do is under the build section, we want to actually pull this in on the post CSS.
04:49
There are many different ways that you can use Tailwind. But the easiest way to get started with this in Nuxt is to use post CSS to process all of this. So I'm going to create a post CSS option here.
05:01
And inside of here, I'm going to choose to install or use rather the Tailwind CSS plugin. And the only option that the Tailwind CSS plugin requires is to point to the configuration file. So we're going to go ahead and say Tailwind and get rid of that css.config.js.
05:20
And that is literally it. We now have Tailwind installed and working within our project. Let's just head over to here. I'm going to go ahead and cancel out of this and just rerun npm run dev just in case.
05:31
And we'll just keep an eye on this just to make sure we don't see any errors. We can even do this inside of the browser if we want to. Okay, so that looks like it is good. What we're now going to do is head over to that index.view page here.
05:45
And let's just use say background blue 500. And just make sure that when we do this, it works. So perfect. So now we've got Tailwind set up inside of a Nuxt project.
05:58
Now in this snippet, I'm not going to talk about stripping CSS using something like CSS Nano or Purge CSS. I'll let you go ahead and figure that out. But that's just basically a really quick way to get Tailwind installed in an existing project.
06:13
And of course, what you can do is if you're maybe switching over from another framework, you can just include all of this, start using Tailwind and slowly start moving things over. It really depends on what kind of thing that you're doing. Now just lastly, we just want to make sure that this is going to build properly, of course,
06:29
for production. So I'm going to go ahead and run npm run build here, just wait for this to finish. And then we'll run npm run serve and serve our client and server and see if that background is in fact still blue.
06:42
Okay, so that's all compiled. Let's go ahead and run npm run serve. And it's actually npm run start not serve. And let's go over here.
06:52
And sure enough, our production build now has a blue background, of course, with that Tailwind CSS in there. So there we go. There is your quick start guide to getting Tailwind set up with Nuxt.js.

Episode summary

In this episode, we walk through the process of adding Tailwind CSS to a Nuxt.js project from scratch—doing it all manually for maximum control (instead of relying on pre-built templates or automated integrations).

We start by creating a fresh Nuxt project, running through the usual setup prompts, but specifically not selecting the built-in Tailwind integration—even passing on all the other extra tools—because we want to understand what’s really happening under the hood.

Next, we install Tailwind via npm, organize our CSS in an app.scss file inside the assets/styles folder, and wire this up in the Nuxt project's global CSS configuration. Since we’re using SCSS, we also go ahead and add node-sass and sass-loader to our development dependencies, ensuring our styles compile smoothly.

Then we generate the needed Tailwind config file—either manually or by running npx tailwind init—and update the Nuxt configuration to process our styles using PostCSS and the Tailwind plugin. After restarting the dev server, we test if Tailwind is working by tweaking a page background color, confirming the utility classes are live.

We wrap up by doing a quick production build and serve, making sure everything works outside of development too. (Bonus: We briefly mention options for CSS purging, but leave that for you to explore.)

By the end of this video, you’ll know exactly how to set up and troubleshoot Tailwind in any Nuxt project, whether it's brand new or something you’re retrofitting.

Episode discussion

No comments, yet. Be the first!