Install daisyUI for Next.js

How to install Tailwind CSS and daisyUI in a Next.js project

1. Create a new Next.js project

Create a new Next.js project in the current directory

npx create-next-app@latest ./

2. Install Tailwind CSS and daisyUI

npm install tailwindcss @tailwindcss/postcss daisyui@latest

3. Add Tailwind CSS and daisyUI

Add Tailwind CSS to your PostCSS config file

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
export default config;

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

@import "tailwindcss";
@plugin "daisyui";

Now you can use daisyUI class names!

Official daisyUI
Figma Library

Available on daisyUI store

More details