How to Install Tailwind CSS in Nuxt 2

A quick guide on how to install Tailwind CSS in your Nuxt 2 project.

Article thumbnail image

Getting Started

First, we need to generate a Nuxt.js project.

You can skip this part if you already generated a project.

npx create-nuxt-app my-cool-app

Then follow the prompts...

Next, navigate into the project directory and install @nuxtjs/tailwindcss as well as Tailwind and its peer dependencies.

cd my-cool-app
npm install -D @nuxtjs/tailwindcss [email protected] [email protected] [email protected]

Add the @nuxtjs/tailwindcss module to the buildModules option of your nuxt.config.js file:

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

Next, generate your tailwind.config.js.

npx tailwindcss init

Open the tailwind.config.js file and change the contents to the following:

module.exports = {
  purge: [
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [],

Next, open the ./assets/css/tailwind.css file that Nuxt.js generates for you by default and replace the contents to the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

And we're finished! Now when you execute npm run dev, Tailwind CSS will be ready to be used in your project.