install daisy ui tailwind in nextjs

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


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  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[email protected]
# OR
npx create[email protected] <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 

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 (
        <title> NextJS with Daisy UI </title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      <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>
create button in nextjs with daisy ui