How to use Tailwind CSS with Nuxt

Tailwind CSS is a utility-first CSS framework that is easily modified to suit your intended style. It comes with an extensive range of classes for your HTML markup to create components such as cards, buttons, form inputs and more with ease. This tutorial is for projects that use another CSS framework (such as Bootstrap) and want to switch to Tailwind. If it’s a new project, use create-nuxt-app as tailwind support is baked in.

Adding Tailwind into your project

Integrating with Nuxt is reasonably straightforward. All you need to do is install a new dependency, create a few new files and modify your nuxt.config.js.

To start with, add all your dependencies:

yarn add --dev @nuxtjs/tailwindcss node-sass sass-loader

or

npm i --save-dev @nuxtjs/tailwindcss node-sass sass-loader

Please note that sass-loader and node-sass are optional. But really, if you're using Nuxt for your project you should be familiar with the basics of css preprocessors and how they can enhance your CSS.

Changes required to your Nuxt config:

export default {
  buildModules: ['@nuxtjs/tailwindcss'],

  // Or, if nuxt < 2.9.0
  modules: ['@nuxtjs/tailwindcss']
}

Since we're using the @nuxtjs/tailwindcss dependency, all you need to do is run yarn dev or npm run dev and the package will create two new files in your project: /assets/css/tailwind.css and /tailwind.config.js. These are created with a basic configuration to get you up and running.

That's it! Now you can use Tailwind classes in your project. However, feel free to read on if you want to learn how to extend your Tailwind configuration and/or add some default styles.

Extending Tailwind

Extending your Tailwind configuration is simple. All you need to do is modify your tailwind.config.js file.

To simply extend on an existing utility, use theme.extend. Extending a utility (such as listStyleType) is as simple as this:

module.exports = {
  theme: {
    extend: {
      listStyleType: {
        square: 'square'
      }
    }
  },
  variants: {},
  plugins: []
}

Using extend here is important, as it won't overwrite any of the existing listStyleType classes already present in Tailwind. However, you'll now be able to use list-square in your project and any lists will now use a square bullet point.

Creating global styles

To create some global styles for your project, you need to modify your /assets/css/tailwind.css file created when you installed the @nuxtjs/tailwindcss dependency. Again, the team at Tailwind have made it super-easy to create some global styles, you just need to ensure they go at the bottom of the css file.

For example:

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

*,
*:before,
*:after {
  @apply box-border m-0;
}

You'll notice that we can use the @apply feature here. This is useful to keep your classes consistent and if you change or extend your tailwind config (seen above) then those changes will also be applied.

Wrapping up

As you can see, adding Tailwind to your existing Nuxt project is a simple process, but it adds a ton of flexibility. Once you’ve learned all the classes, creating intricate and intuitive user interfaces becomes a painless and enjoyable task, and this is why I highly recommend Tailwind for your project(s)!