How to Install Tailwind DaisyUI In NuxtJS

In this tutorial, I will show you how to install tailwind daisyui in Nuxt 3. Before we start we need to install tailwind css in Nuxt 3. Then After we need to install DaisyUI plugin in Nuxt 3.

Create Nux 3 Project

Run below command in terminal to install nuxt 3 project.

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

Move to project.

cd nuxt-daisyui

Install the dependencies:

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

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

# using yarn
yarn add --dev @nuxtjs/tailwindcss

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

nuxt.config.ts

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

Install DaisyUI In Nuxt 3

Run below command to install DaisyUI.

npm i daisyui

Next, create tailwind.config.js file and add DaisyUI plugin.

tailwind.config.js

module.exports = {
  plugins: [require("daisyui")],
};

app.vue

<template>
  <div class="flex justify-center h-screen space-x-4 items-center">
    <div class="card card-compact w-96 bg-base-100 shadow-xl">
      <figure>
        <img src="https://placeimg.com/400/225/arch" alt="Shoes" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">Shoes!</h2>
        <p>If a dog chews shoes whose shoes does he choose?</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">Buy Now</button>
        </div>
      </div>
    </div>
  </div>
</template>

Run nuxt 3 server

npm run dev