whitedark-daisyui

DaisyUI + Tailwindcss Components for nextjs 14 App Router

1npm i whitedark-daisyui daisyui next-themes clsx

Add to your css file

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5/* For DaisyUi Component Customizing*/
6.btn {
7  @apply h-10 min-h-10 min-w-10 rounded-full;
8}
9.btn-circle {
10  @apply w-10;
11}
12.btn-wide {
13  @apply w-auto min-w-32 lg:min-w-36;
14}
15/* For Navbar Links */
16.menu > li > a {
17  @apply rounded-full;
18}
19.card-compact {
20  @apply rounded-lg;
21}
22.join-border-0 > .join-item {
23  @apply !border-0;
24}
25.join-bordered {
26  @apply border;
27}
28.join-vertical > .join-item {
29  @apply border-0 border-b border-inherit;
30}
31.join-vertical :last-child {
32  @apply border-b-0;
33}
34.join-horizontal > .join-item {
35  @apply border-0 border-r border-inherit;
36}
37.join-horizontal :last-child {
38  @apply border-r-0;
39}
40/**For Bug Fix - Nested Join-items**/
41.join :not(:first-child):not(:last-child) {
42  @apply !rounded-none;
43}