How to Install Tailwind CSS in Nuxt.js (Nuxt 3)

Headless UI is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Nuxt 3 official documentation has a listed module for TailwindCSS. https://nuxt.com/modules/tailwindcss

But, you can use it without this module. You can do it easily by following just 7 easy steps. Let’s get started -

1. Create your project

Start by creating a new Nuxt.js project if you don’t have one set up already. The most common approach is to use the Nuxt Command Line Interface.

npx nuxi init nuxt3-project
cd nuxt3-project

TailwindCSS

2. Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate a tailwind.config.js file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

3. Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixer to the postcss.plugins object in your nuxt.config.js file.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

4. Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Add the Tailwind directives to your CSS

Create an ./assets/css/tailwind.css file and add the @tailwind directives for each of Tailwind’s layers.

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

6. Add the CSS file globally

Add your newly-created ./assets/css/tailwind.css to the css array in your nuxt.config.js file.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

7. Start your build process

Run your build process with npm run dev.

npm run dev

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="https://tailwindcss.com/_next/static/media/sarah-dayan.a620c98f.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>