In this section we will see how to use daisy ui as a tailwind css components in NextJS. There are two way we can start nextjs project with Daisy UI.
1. Install Daisy UI Step by Step in NextJS
Install & setup tailwind css v3 in nextjs. you can read tailwind css doc or read below article
How to Install & Setup Tailwind CSS v3 In NextJS
Install daisyui
npm i daisyui
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
}
Run server
npm run dev
2. Install Daisy UI Tailwind in NextJS with Create TW
Create next js project with npx:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Create next js project with yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select NextJS.
? Project name nextjs-daisyui
? App type (Use arrow keys)
❯ Next.js (create-next-app)
Vanilla (create-vite)
React (create-vite)
Vue (create-vite)
Astro (create-astro)
Svelte Kit (create-svelte)
Preact (create-vite)
Solid (degit solidjs/templates/js)
Select typescript.
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
Select Daisy UI Plugin.
? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
◯ @tailwindcss/typography
◯ @tailwindcss/forms
◯ @tailwindcss/aspect-ratio
◯ @tailwindcss/line-clamp
❯◯ daisyui
◯ prettier-plugin-tailwindcss
Move to project and run the server.
cd nextjs-daisyui
npm run dev
index.jsx / index.tsx
import Head from 'next/head';
export default function Home() {
return (
<div>
<Head>
<title> NextJS with Daisy UI </title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="container mx-auto mt-20 space-x-2">
<button className="btn">Button</button>
<button className="btn btn-primary">Button</button>
<button className="btn btn-secondary">Button</button>
<button className="btn btn-accent">Button</button>
<button className="btn btn-ghost">Button</button>
<button className="btn btn-link">Button</button>
</div>
</div>
);
}
