How to install daisyUI and Tailwind CSS in Next.js 14

In this article, we will learn how to use daisyUI component library in Next.js.

Next.js is currently one of the popular JavaScript meta frameworks for building web applications. Since we can use daisyUI in any JavaScript framework, we can also use it in Next.js.

Installing Next.js is pretty straightforward. It also includes Tailwind CSS by default. After installing Next.js, we can install daisyUI as a plugin and start using it in our Next.js project.

Installing Next.js

1. Let's start by creating a new Next.js project. You can use the following command to create a new Next.js project:

npx create-next-app@latest

2. Answer the questions to complete the project creation process. Make sure to enableTailwind CSSwhen asked about it:

Go to the project directory. If you named itmy-app:

cd my-app

Installing daisyUI

3. Now install the latest version of daisyUI as a dev dependency:

npm i -D daisyui@latest

4. Opentailwind.config.tsfile Add daisyUI as a plugin:

import type { Config } from 'tailwindcss'
+ import daisyui from 'daisyui'
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
- plugins: [],
+ plugins: [daisyui],
}
export default config

Using daisyUI

5. Open/app/page.tsxfile Replace the content with:

export default function Home() {
  return (
    <>
      <button className="btn btn-primary">Hello daisyUI!</button>
    </>
  )
}

Ready to go!

6. Run the project using:

npm run dev

And openhttp://localhost:3000/to see a button with daisyUI styles.

You can now use anydaisyUI componentor anyTailwind CSS utility classin your Next.js project.

7. Extra: You can also remove the default Next.js styles fromapp/globals.css, to have a clean start. Only keep the following line:

@tailwind base;
@tailwind components;
@tailwind utilities;