Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

Create your project

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

Terminal

npx nuxi init my-project
cd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Nuxt configuration as a Vite plugin.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Import Tailwind CSS

Create an ./assets/css/main.css file and add an @import that imports Tailwind CSS.

main.css

@import "tailwindcss";

Add the CSS file globally

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

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

app.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>