Install Tailwind CSS in Nuxt 3 with NuxtTailwind Module

In this tutorial, I will show you how to install tailwind css in nuxt 3 using NuxtTailwind Module. NuxtTailwind prove zero configuration also it Includes CSS Nesting with postcss-nesting.

Create Nux 3 Project

Run below command in terminal to install nuxt 3 project.

# using npx
npx nuxi init nuxt-app
# using pnpm
pnpm dlx nuxi init nuxt-app

Move to project.

cd nuxt-app

Install the dependencies:

# using npm
npm install
# using pnpm
pnpm install
# using yarn
yarn install

Run nuxt 3 server

npm run dev

Install Tailwind CSS 3 in Nuxt 3 Using NuxtTailwind

Run below command to install tailwind css in your project.

# using npm
npm install --save-dev @nuxtjs/tailwindcss
# or
npm install -D @nuxtjs/tailwindcss
# using yarn
yarn add --dev @nuxtjs/tailwindcss

Add @nuxtjs/tailwindcss to the modules section of nuxt.config.js or nuxt.config.ts.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
});

Now test tailwind css classes in your nuxt 3 project.

app.vue

Vue

<template>
  <div>
    <div class="text-4xl font-bold text-purple-600 text-center mt-20">
      Nuxt 3 with Tailwind CSS 3
    </div>
    <NuxtWelcome />
    
  </div>
</template>