How to Install Tailwind CSS in Nuxt 2

Getting Started

First, we need to generate a Nuxt.js 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: [
     './components/**/*.{vue,js}',
     './layouts/**/*.vue',
     './pages/**/*.vue',
     './plugins/**/*.{js,ts}',
     './nuxt.config.{js,ts}',
   ],
  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.