Updates, ideas and resources
daisyUI 5 alpha is in development and I'm looking for your suggestions, feedbacks and ideas to make it better.
daisyUI 5 alpha is in development [v5 branch]
alpha
and then install daisyUI alpha
npm i -D daisyui@alpha
Your CSS file:
@import "tailwindcss";
@plugin "daisyui";
You can use options
@plugin "daisyui" {
logs: true;
root: ":root";
include: button, badge, input, card;
exclude: badge;
themes: light --default, dark --prefersdark, cupcake;
}
You can add custom themes
@plugin "daisyui/theme" {
name: "my-theme";
default: false;
prefersdark: false;
color-scheme: light;
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--radius-badge: .5rem;
--radius-btn: .5rem;
--radius-box: .5rem;
--spacing-button-border: 1px;
--spacing-tab-border: 1px;
}
Here’s how you can help:
Put your feedbacks in the comments here in the GitHub Discussion
Thank you for your help! 🙏
Subscribe to daisyUI blog newsletter to get updates on new posts.
You will only receive a single email when a new blog post is published. No spam. No ads.