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
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,