# Daisy UI not working with Next JS

**URL:** <https://forum.codewithmosh.com/t/daisy-ui-not-working-with-next-js/24275>\
**Category:** Next.js\
**Created:** [December 27, 2023, 7:46am UTC](https://forum.codewithmosh.com/t/daisy-ui-not-working-with-next-js/24275 "2023-12-27T07:46:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![TanP23](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@TanP23](https://forum.codewithmosh.com/u/TanP23)\
**Post date:** [December 27, 2023, 7:46am UTC](https://forum.codewithmosh.com/t/daisy-ui-not-working-with-next-js/24275/1 "2023-12-27T07:46:16Z")

</div>

I am trying to use Daisyui library but even after installing it adding it as a plugin in tailwind config file, the style does not get applied, why is it happening?

package.json

```auto
{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "daisyui": "^4.4.24",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

```

global.css

```auto
/* @tailwind base;
@tailwind components;
@tailwind utilities; */

:root {
  --foreground-rgb: 1, 1, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: black;
  padding: 1rem;
}

```

tailwind.config.ts:

```auto
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: [daisyui],
};
export default config;
```

AddToCart.ts:

```auto
'use client';
import React from 'react'

const AddToCart = () => {
  return (
    <div>
      <button className='btn btn-primary' onClick={() => console.log('Click')}>Add to Cart</button>
    </div>
  )
}

export default AddToCart
```

[![](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/a/add420b95bca94ae63d84cb66465d9e18e8d5275.png)](https://ibb.co/3f6dvj4)

---

<div class="post-metadata">

**Author:** ![TanP23](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@TanP23](https://forum.codewithmosh.com/u/TanP23)\
**Post date:** [December 27, 2023, 1:19pm UTC](https://forum.codewithmosh.com/t/daisy-ui-not-working-with-next-js/24275/2 "2023-12-27T13:19:54Z")

</div>

FIgured it out, the global css file was overriding the library.

---

<div class="post-metadata">

**Author:** ![onlyhasbi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/onlyhasbi/32/4608_2.png) [@onlyhasbi](https://forum.codewithmosh.com/u/onlyhasbi)\
**Post date:** [December 30, 2023, 1:54pm UTC](https://forum.codewithmosh.com/t/daisy-ui-not-working-with-next-js/24275/3 "2023-12-30T13:54:39Z")

</div>

❌ wrong

```auto
plugins: [daisyui],

```

✅ correct

plugins:[require(“daisyui”)]