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

npm 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!

Note about using Turbopack

If you're using Turbopack (like next dev --turbopack), The default Lightning CSS config will modify some styles which may cause issues.

To fix this add "browserslist": "> 1%" to your package.json file using this command:

npm pkg set browserslist="> 1%"

This will tell Lightning CSS to target modern browsers instead of polyfilling styles for outdated browsers.