how to install tailwind css 3 in nuxt 3

How to Install Tailwind CSS 3 in Nuxt 3

updated 25/09/22 By frontendshape

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
 ✨ 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

tailwind nuxt 3 structure


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

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


import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},

  css: [

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


module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [],


  <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
setup tailwind nuxt 3

setup tailwind nuxt 3

npm run dev