DaisyUI Integration #1477

andre-brandao · 2024-11-11T17:00:27Z

andre-brandao
Nov 11, 2024

To use Shadcn components with daisy ui you just need to change the variables in the tailwind config to match daisyui ones, note that daisy ui uses oklch

You should be able to delete the entire postcss file and just change the variables in your tailwind config

Usefull Links

Example

import type { Config } from 'tailwindcss';
import daisyui from 'daisyui';
import tailwindcssAnimate from 'tailwindcss-animate';

export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		container: {
			center: true,
			padding: '2rem'
		},
		extend: {
			colors: {
				border: 'oklch(var(--p) / <alpha-value>)',
				input: 'oklch(var(--s) / <alpha-value>)',
				ring: 'oklch(var(--in) / <alpha-value>)',
				background: 'oklch(var(--b1) / <alpha-value>)',
				foreground: 'oklch(var(--bc) / <alpha-value>)',
				primary: {
					DEFAULT: 'oklch(var(--p) / <alpha-value>)',
					foreground: 'oklch(var(--pc) / <alpha-value>)'
				},
				secondary: {
					DEFAULT: 'oklch(var(--s) / <alpha-value>)',
					foreground: 'oklch(var(--sc) / <alpha-value>)'
				},
				destructive: {
					DEFAULT: 'oklch(var(--er) / <alpha-value>)',
					foreground: 'oklch(var(--erc) / <alpha-value>)'
				},
				muted: {
					DEFAULT: 'oklch(var(--n) / <alpha-value>)',
					foreground: 'oklch(var(--nc) / <alpha-value>)'
				},
				accent: {
					DEFAULT: 'oklch(var(--a) / <alpha-value>)',
					foreground: 'oklch(var(--ac) / <alpha-value>)'
				},
				popover: {
					DEFAULT: 'oklch(var(--b2) / <alpha-value>)',
					foreground: 'oklch(var(--bc) / <alpha-value>)'
				},
				card: {
					DEFAULT: 'oklch(var(--n) / <alpha-value>)',
					foreground: 'oklch(var(--nc) / <alpha-value>)'
				},
				sidebar: {
					DEFAULT: 'oklch(var(--b2) / <alpha-value>)',
					foreground: 'oklch(var(--bc) / <alpha-value>)',
					primary: 'oklch(var(--p) / <alpha-value>)',
					'primary-foreground': 'oklch(var(--pc) / <alpha-value>)',
					accent: 'oklch(var(--p) / <alpha-value>)',
					'accent-foreground': 'oklch(var(--pc) / <alpha-value>)',
					border: 'oklch(var(--bc) / <alpha-value>)',
					ring: 'oklch(var(--bc) / <alpha-value>)'
				}
			},
			borderRadius: {
				xl: 'calc(var(--rounded-btn) + 4px)',
				lg: 'var(--rounded-btn)',
				md: 'calc(var(--rounded-btn) - 2px)',
				sm: 'calc(var(--rounded-btn) - 4px)'
			},
			keyframes: {
				'accordion-down': {
					from: { height: '0' },
					to: { height: 'var(--bits-accordion-content-height)' }
				},
				'accordion-up': {
					from: { height: 'var(--bits-accordion-content-height)' },
					to: { height: '0' }
				},
				'caret-blink': {
					'0%,70%,100%': { opacity: '1' },
					'20%,50%': { opacity: '0' }
				}
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out',
				'caret-blink': 'caret-blink 1.25s ease-out infinite'
			}
		}
	},

	plugins: [daisyui, tailwindcssAnimate],
	daisyui: {
		themes: [
			'bumblebee',
			'light',
			'dark',
			'cupcake',
			'emerald',
			'corporate',
			'synthwave',
			'retro',
			'cyberpunk',
			'valentine',
			'halloween',
			'garden',
			'forest',
			'aqua',
			'lofi',
			'pastel',
			'fantasy',
			'wireframe',
			'black',
			'luxury',
			'dracula',
			'cmyk',
			'autumn',
			'business',
			'acid',
			'lemonade',
			'night',
			'coffee',
			'winter',
			'dim',
			'nord',
			'sunset'
		]
	}
} satisfies Config;

andre-brandao · 2025-01-28T23:06:00Z

andre-brandao
Jan 28, 2025
Author

I just started playing arround with tailwind 4 + daisyui, to make the transition, just use the following css file

** It might need some ajusts, if you have any that makes it look better please share it here

@import 'tailwindcss';
@plugin "daisyui" {
  themes: winter --default, dim --prefersdark;
}
/* @plugin "daisyui" {
  themes: all;
} */


/* @variant dark (&:where([data-theme=dim], [data-theme=dim] *)); */

@import './tailwindcss-animate.css'

@theme {
  --color-border: var(--color-primary);
  --color-input: var(--color-secondary);
  --color-ring: var(--color-info);
  --color-background: var(--color-base-100);
  --color-foreground: var(--color-base-content);

  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-content);

  --color-secondary: var(--color-secondary);
  --color-secondary-foreground: var(--color-secondary-content);

  --color-destructive: var(--color-error);
  --color-destructive-foreground: var(--color-error-content);

  --color-muted: var(--color-neutral);
  --color-muted-foreground: var(--color-neutral-content);

  --color-accent: var(--color-accent);
  --color-accent-foreground: var(--color-accent-content);

  --color-popover: var(--color-base-200);
  --color-popover-foreground: var(--color-base-content);

  --color-card: var(--color-neutral);
  --color-card-foreground: var(--color-neutral-content);

  --color-sidebar: var(--color-base-200);
  --color-sidebar-foreground: var(--color-base-content);
  --color-sidebar-primary: var(--color-primary);
  --color-sidebar-primary-foreground: var(--color-primary-content);
  --color-sidebar-accent: var(--color-primary);
  --color-sidebar-accent-foreground: var(--color-primary-content);
  --color-sidebar-border: var(--color-base-content);
  --color-sidebar-ring: var(--color-base-content);

  --radius-xl: calc(var(--rounded-btn) + 4px);
  --radius-lg: var(--rounded-btn);
  --radius-md: calc(var(--rounded-btn) - 2px);
  --radius-sm: calc(var(--rounded-btn) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--bits-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--bits-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

1 reply

andre-brandao Jan 28, 2025
Author

https://github.com/Wombosvideo/tailwindcss-animate-v4

Wombosvideo · 2025-01-29T11:10:16Z

Wombosvideo
Jan 29, 2025

I see you went with oklch instead of keeping hsl colors like I did. Was this a DaisyUI related choice or v4 related choice? Or some other reason altogether?

3 replies

Wombosvideo Jan 29, 2025

This is my app.css. It's a little more verbose. I don't know if I did this the way I was supposed to but it seems to work.

Note

I am new to Tailwind 4, but I've tried my best. Keep in mind:

Does not use DaisyUI!
Uses hsl colors instead of oklch.
Based on style default and base color gray, but with some modifications to match Heviat's theme.
Uses CSS-only tailwindcss-animate.css as a replacement for the JS-based tailwindcss-animate plugin.
It's highly likely this does not follow Tailwind's best practices. Please correct any mistakes you see :-)

Basics: Import Tailwind, tailwind-animate plugin, dark mode selector and color variables

@import 'tailwindcss';
@import './tailwindcss-animate.css';

@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --primary: 232 27% 35%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 210 40% 98%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 232 27% 35%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --primary: 232 27% 35%;
  --primary-foreground: 210 40% 98%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --ring: 212.7 26.8% 83.9%;
  --sidebar-background: 221, 40%, 8%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 232 27% 35%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 221, 40%, 13%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@theme variables (utility classes)

@theme inline {
  /* Fonts */
  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* Container */
  /* Colors */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-caution: var(--color-red-500);
  --color-warning: var(--color-amber-500);
  --color-info: var(--color-sky-500);
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Border */
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Animations */
  --animate-accordion-down: 0.2s ease-out accordion-down;
  --animate-accordion-up: 0.2s ease-out accordion-up;
  --animate-caret-blink: 1.25s ease-out infinite caret-blink;

  /* Keyframes */
  @keyframes accordion-down {
    from: {
      height: 0;
    }
    to: {
      height: var(--bits-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from: {
      height: var(--bits-accordion-content-height);
    }
    to: {
      height: 0;
    }
  }
  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}

The entire app.css file

@import 'tailwindcss';
@import './tailwindcss-animate.css';

@custom-variant dark (&:where(.dark, .dark *));

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --primary: 232 27% 35%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 210 40% 98%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 232 27% 35%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --primary: 232 27% 35%;
  --primary-foreground: 210 40% 98%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --ring: 212.7 26.8% 83.9%;
  --sidebar-background: 221, 40%, 8%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 232 27% 35%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 221, 40%, 13%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@theme inline {
  /* Fonts */
  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'Source Code Pro Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* Container */
  /* Colors */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-caution: var(--color-red-500);
  --color-warning: var(--color-amber-500);
  --color-info: var(--color-sky-500);
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Border */
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Animations */
  --animate-accordion-down: 0.2s ease-out accordion-down;
  --animate-accordion-up: 0.2s ease-out accordion-up;
  --animate-caret-blink: 1.25s ease-out infinite caret-blink;

  /* Keyframes */
  @keyframes accordion-down {
    from: {
      height: 0;
    }
    to: {
      height: var(--bits-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from: {
      height: var(--bits-accordion-content-height);
    }
    to: {
      height: 0;
    }
  }
  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

andre-brandao Jan 29, 2025
Author

oklch was chosen because of the last version of daisyui(v4 works with tailwind v3), daisy v5(for tailwind v4) does not need the oklch anymore because of the variable changes

andre-brandao Jan 29, 2025
Author

im also just getting started with tailwind v4, to get the best integration possible we will have to wait for the shadcn-svelte implementation

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DaisyUI Integration #1477

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

DaisyUI Integration #1477

andre-brandao Nov 11, 2024

Usefull Links

Replies: 2 comments · 4 replies

andre-brandao Jan 28, 2025 Author

andre-brandao Jan 28, 2025 Author

Wombosvideo Jan 29, 2025

Wombosvideo Jan 29, 2025

andre-brandao Jan 29, 2025 Author

andre-brandao Jan 29, 2025 Author

andre-brandao
Nov 11, 2024

Replies: 2 comments 4 replies

andre-brandao
Jan 28, 2025
Author

andre-brandao Jan 28, 2025
Author

Wombosvideo
Jan 29, 2025

andre-brandao Jan 29, 2025
Author

andre-brandao Jan 29, 2025
Author