How to Install Tailwind CSS 3 in Nuxt 3

Hello Friend in today we will see how to install & setup tailwind css v3 in nuxtjs 3. Nuxtjs is good for server-side rendering (SSR) or static site generation (SSG). Nuxt 3 has been re-architected with a smaller core and optimized for faster performance and better developer experience. Tailwind CSS a utility-first CSS framework. tailwind css and nuxt js is perfect for each other.

Install & Setup Tailwind CSS 3 in Nuxt 3

Create Nuxt 3 Project.

Run below command to create nuxt 3 project.

npx nuxi init nuxt-tailwind 

After run it look like this, so follow the setps.

Nuxt CLI v3.0.0-rc.3                                            12:50:28
ℹ cloned nuxt/starter#v3 to /Tailwind/Tailwind CSS 3v/NUXT 3/nuxt-tailwind                 12:50:29
                                                      12:50:29
 ✨ Your superior Nuxt project is just created! Next steps:

 📁 cd nuxt-tailwind                                           12:50:29

 💿 Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist       12:50:29

 🚀 Start development server with npm run dev or yarn dev or pnpm run dev  

move to project.

cd nuxt-tailwind 

Install the dependencies.

 npm install

Install Tailwind CSS 3 in Nuxt 3

install tailwind v3 via npm:

npm install -D tailwindcss postcss@latest autoprefixer@latest
npx tailwindcss init

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

tailwind nuxt 3 structure

assets/css/main.css

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

Next, you need to add postcss and /assets/css/main.css in nuxt.config.ts.

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';

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

  css: [
    '@/assets/css/main.css',
  ],
});

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

tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app.vue

<template>
  <div class="flex justify-center items-center h-screen">
    <h1 class="text-3xl font-bold text-green-500">
      How to install Tailwind CSS 3 in Nuxt 3
    </h1>
  </div>
</template>

setup tailwind nuxt 3

npm run dev