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
{
"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
/* @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:
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:
'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
wrong
correct