Suggestions, feedback and ideas for daisyUI v5 beta

[saadeghi]

Hello and welcome 💚

daisyUI 5 is in development [v5 branch]

• There's no docs or changelog yet Release notes, Changelogs
• Some components are not ready
• There are many bugs and any alpha beta version may break things
• If you use it in production a baby dolphin will die get sick

Try it

1. You can try this Tailwind Play link which includes a big dump of components

2. Or you can try the new full.css daisyui.css or the new chunks.css!

3. Or if you're brave enough to try Tailwind CSS 4 beta + daisyUI 5 alpha beta,
   Install Tailwind CSS 4 alphabeta and then install daisyUI alpha beta

   npm i -D daisyui@beta
   

   Your CSS file:

   @import "tailwindcss";
   @plugin "daisyui";

   Use options

   @plugin "daisyui" {
     logs: true;
     root: ":root";
     include: button, badge, input, card;
     exclude: badge;
     themes: light --default, dark --prefersdark, cupcake;
   }

   Add a custom theme

   @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-selector: 1rem;
     --radius-field: 0.5rem;
     --radius-box: 2rem;
   
     --size-selector: 0.25rem;
     --size-field: 0.25rem;
   
     --border: 1px;
     
     --depth: 0;
     --noise: 0;
   }

Feedbacks needed

Here's how you can help:

• Feedback: What do you like/dislike about v5 so far?
• Suggestions: Any features or improvements you'd like to see in the stable version of daisyUI 5?
• Bug Reports: Found a new bug in v5 alpha beta? Let me know.

Put your comments 👇

[Tekechen]

I love DaisyUI. I suggest a date picker.

[brendoarrudaa]

As soon as it is officially launched, I will implement it in my Saas

[condemil]

@saadeghi on the calendar page the first example have white arrows and date picker example (the one with dropdown) have black arrows

[rsessine]

@saadeghi Any plans on making navigation possible ? To change month and years quickly by clicking on it.

[saadeghi]

@rsessine daisyUI is the style. The functionality comes from each of 3 available calendar packages and you can check each package from their repo.

[Anutrix]

Maybe with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal .

[vipincode]

Hey there , Date and Calendar most important for development, I also not find multi select, I see these in future

[tianjos]

Hi! I would like to see progress with percentage feedback

[saadeghi]

Like a tooltip, showing a number?

[tianjos]

yep! seems great

[saadeghi]

You would need some JS to get the value of range input and show it in the tooltip:
https://codepen.io/saadeghi/pen/LYwaEzV?editors=1000

[Ookamini95]

A context menu (https://primeng.org/contextmenu) would be very pog

[Avaray]

That is pretty interesting

[aparajita]

DaisyUI is only CSS, and a context menu needs Javascript to intercept the contextmenu event. From there you can display a standard daisyUI menu, no special component needed.

[xcaptain]

Need this, preline UI and flyonui already supported contextmenu

[saadeghi]

@xcaptain
I think there's a misunderstanding…

• daisyUI is a CSS library.
• Context menu is a JS event
• Preline is JS. It adds a 309kb JS file to your page.
• Flyon UI is daisyUI + Preline source codes combined.

Here's an example of using daisyUI menu with JS oncontextmenu event:
https://svelte.dev/playground/bb1295931880414a9448901e6548775a?version=5.17.3

[xcaptain]

Thanks, your code snippet is very helpful to me!

[mathsue0]

I suggest Select with search, for example.

I made the gif component using input + dropdown from DaisyUI S2.

[Ookamini95]

The broser has some nice features supporting this

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

[cachesdev]

datalist cannot be styled.

[mathsue0]

Well, for those who need to use select search without waiting for the new version of DaisyUI, I managed to make one that, in my opinion, was good, but using hook forms.

Use

const { register, handleSubmit, formState: { errors }, watch } = useForm();

<SelectSearch
    className="w-full"
    name="country"
    placeholder="Busque pelo país"
    contentText="Digite pelo menos 3 caracteres para buscar"
    inputChange={handleSearchCountry}
    loading={loading}
    options={countries?.map((country) => ({ label: country.native, value: country.id }))}
    register={register("country", {
        required: { value: true, message: "O país é obrigatório" }
    })}
    errors={errors}
/>

Component

import { Search } from "lucide-react";
import React, { useRef, useState } from "react";
import { FieldErrors, FieldValues, UseFormRegisterReturn } from "react-hook-form";

export type Option = {
    label: string;
    value: any;
};

export type SelectSearchProps = {
    name: string;
    className?: string;
    placeholder?: string;
    contentText?: string;
    inputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    options?: Option[];
    loading?: boolean;
    register?: UseFormRegisterReturn<string>;
    errors?: FieldErrors<FieldValues>;
};

export const SelectSearch: React.FC<SelectSearchProps> = ({ name, ...props }) => {
    const { className, placeholder, contentText, inputChange, options, loading, register, errors } = props;

    const divRef = useRef<HTMLDivElement>(null);
    const inputShowRef = useRef<HTMLInputElement>(null);

    const [ required ] = useState<boolean>(register?.required || false);

    const isError = errors && register && errors[register.name]

    function handleSelectItem(option: Option) {
        if (inputShowRef.current) inputShowRef.current!.value = option.label;
        removeFocusDiv();
        register?.onChange({ target: { name, value: option.value } });
    }

    function handleBlur(e: any) {
        const value = e.target.value;

        if (options?.find((option) => option.label === value)) {
            return;
        }
        if (inputShowRef.current) {
            inputShowRef.current.value = "";
            register?.onChange({ target: { name, value: "" } });
        }
    }

    function handleOnChange(e: any) {
        const value = e.target.value;
        inputChange && inputChange(value);
    }

    function removeFocusDiv() {
        divRef.current?.focus();
        divRef.current?.blur();
    }

    return (
        <>
            <div tabIndex={-1} className="dropdown" ref={divRef}>
                <label className={`input input-bordered flex items-center gap-2 ${className} ${isError ? "input-error" : "input-primary"}`} >
                    <input ref={inputShowRef} type="text" className="grow" placeholder={placeholder} onChange={handleOnChange} onBlur={handleBlur} required={required} />
                    <select className="hidden" {...register}>
                        {
                            options?.map((option, index) =>
                                <option key={index} value={option.value}>
                                    {option.label}
                                </option>
                            )
                        }
                    </select>
                    <Search size={22} className="text-base" />
                </label>
                <ul
                    tabIndex={0}
                    className="dropdown-content dropdown-open z-10 menu p-2 shadow bg-base-100 rounded-box w-full"
                >
                    {
                        loading && <span className="loading loading-spinner loading-md text-primary mx-auto py-4"></span>
                    }

                    {
                        !loading && options && options?.map((option, index) =>
                            <li key={index} onClick={() => handleSelectItem(option)}>
                                <a>
                                    {option.label}
                                </a>
                            </li>
                        )
                    }

                    {
                        !loading && !options?.length &&
                        <li className="text-center text-sm py-6">
                            { contentText }
                        </li>
                    }
                </ul>
            </div>
            {
                isError &&
                <span className="w-full text-start text-error text-sm"> {`${errors[register.name]?.message}`} </span>
            }
        </>
    )
}

[blackfyre]

The broser has some nice features supporting this

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Datalists are nice, but I need ID/label pairs which doesn't work sadly.

[sillvva]

I built one using Svelte, sveltekit-superforms, and the bits-ui combobox component. bits-ui is shadcn-svelte minus the styles. I was using daisyui and tweaked the example using daisyui's group, button, input, and dropdown styles.

https://github.com/sillvva/ddal-svelte/blob/main/src/lib/components/forms/Combobox.svelte

<Control class="col-span-12 sm:col-span-6">
  <Combobox
    {superform}
    label="DM Name"
    valueField="dm.id"
    inputField="dm.name"
    values={data.dms.map((dm) => ({
      value: dm.id,
      label: dm.name,
      itemLabel: dm.name + (dm.uid === data.user.id ? ` (Me)` : "") + (dm.DCI ? ` (${dm.DCI})` : "")
    })) || []}
    allowCustom
    onselect={({ selected }) => {
      const id = selected?.value;
      const name = selected?.label;
      $form.dm = data.dms.find((dm) => dm.id === id) || (name ? { ...$form.dm, name } : defaultDM(data.user.id));
    }}
    clearable
    onclear={() => ($form.dm = defaultDM(data.user.id))}
    link={$form.dm.id ? `/dms/${$form.dm.id}` : ""}
    placeholder={data.dms.find((dm) => dm.uid === data.user.id)?.name || data.user.name}
  />
</Control>

[jordan1900]

Would love to see a way to control state for inputs like checkbox, radio and toggle with a class, in addition to props (similar to btn-active). When I apply Daisy styles to headless component like React Aria the styled implementation doesn't always work.

So for example, something like this would be super handy for me to control props and styling with.

<Checkbox className="checkbox checkbox-active">

[saadeghi]

That's an issue React Aria should fix.

daisyUI works with aria-checked="true" correctly, which is the right aria attribute for a checkbox.

React Aria checkbox is not a checkbox.
It should be either a checkbox <input> tag or it should have role="checkbox" with aria-checked="true", but they are using divs with data-selected="true" which is just a custom data attribute, not an aria attribute.

[Avaray]

The new "shiny" effect on buttons should be optional, not used as default.
It reminds me buttons made with Macromedia Flash in 00s.

[Avaray]

I'm improving the design ✅ This is not final

I'm not saying that is bad. It just does not fit to flat style of daisyUI, that I love ❤️

I believe CSS styles are like fashion trends—they come back around every 10-20 years :P
And you might be right that flat design will be over soon (it that's the reason why you went for 3d)

[asquithea]

btn-shiny anyone :-D

In all seriousness it would be great 🙏 to easily keep the same visual appearance for existing apps. Predictability and consistency is an under-rated feature (and avoids me being told off by my company's design team)!

Many thanks for all that you do - DaisyUI is genuinely impressive.

[notramo]

I also observed this shiny effect on checkboxes and radio buttons. It doesn't look modern. Sure, the trend may come back, but I want to build apps that look good according to current trends, not the trends 15 years earlier or later from today. DaisyUI 4 styles are optimal for this.

[notramo]

Here is a CSS snippet to remove the shiny effect from all components that currently have it.

@layer utilities {
  .alert,
  .badge,
  .btn,
  .checkbox:checked,
  .input,
  .radio:checked::before,
  .radio [aria-checked]::before,
  .select,
  .select:focus,
  .toggle::after {
    --gloss: 0;
  }
}

You can craft your own .btn-shiny, .badge-shiny, .alert-shiny, etc. utilities that set --gloss to a value between 0 and 1 (0 is flat, 1 is shiny).
Here's an example of a shiny button and badge. The &.btn and &.badge selectors are required for more specificity, so that it overrides the above reset.

@utility btn-shiny {
  &.btn {
    --gloss: 1;
  }
}

@utility badge-shiny {
  &.badge {
    --gloss: 1;
  }
}

Please note that for many components, the shiny effect uses an inset CSS shadow, so if you set a shadow on the element, it removes the shiny effect, no matter what --gloss value was set (this happens even without the workaround, e.g. setting shadow-xl on the component).

I will update these snippets to keep up with recent changes in DaisyUI.

[saadeghi]

It's easier even.

You can set --gloss: 0 for a theme, to control it for all components.

See Effects section here
https://v5.daisyui.com/theme-generator/

And also the CSS variable in the generated CSS code.

It's a new feature. I'm writing docs for it soon.

[Sztacho]

I will suggest the date picker with range date definition. Example you can select only the date from range.

[saadeghi]

support flatpickr as well (if possible)!

I will add in daisyUI 5.1 🫡

[aparajita]

support flatpickr as well (if possible)!

I will add in daisyUI 5.1 🫡

Once it's implemented I'll send $$ your way. Already signed up for a monthly contribution, plan to use it heavily in the next project.

[saadeghi]

@aparajita Thanks for the support 💚

[aparajita]

Hey @saadeghi, I took a closer look at cally and it will suffice for my needs, no need to support flatpickr.

[saadeghi]

@aparajita thanks for the update. Yeah, Cally is new but it's really well made 👍

[Ookamini95]

Animating progress and radial progress bar.

For radial progress bar I've managed to upgrade my previous attempt on the problem #3206 by using some javascript (edit: sorry for angular notation)

html

<div class="radial-progress animate-value" [style]="styled" role="progressbar">70%</div>

css

@property --_value {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.animate-value {
    transition: --_value 1s ease-out;
}

ts

  styled = signal('--_value:10;--value:var(--_value);') // initial value
  setTimeout(() => { this.styled.set( '--_value:70;--value:var(--_value);') } , 5000) // transition after 5s

[Sztacho]

Working with table I see a little problem with the table-zebra class, I have a bg-color set to the specifi case where I need to change a bg color for entry. Maybe you can add a important tag for bg color?

[blackfyre]

Are you guys planning to add Combo boxes? (select + text field search)

[mathsue0]

If u need #3246 (reply in thread)

[bigboggy]

Ability to extend the colors, base-400, base-500 etc would be great

[FlorSanders]

Same with using the standard tailwind colors in the buttons and other components.
Being able to do <button class="btn btn-blue-200"></button> and it using the tailwind colors would be awesome.

[PaulHaze]

I've been able to extend the base colours fine by using variables and then adding it the tailwind config. For example, in my custom 'light' theme I have this code in the daisyui block:

          primary: '#5155c3',
          secondary: '#9b9cf7',
          accent: '#bd531e',
          neutral: '#929293',
          'base-100': 'oklch(99.72% 0.0028 84.56)',
          'base-200': 'oklch(97.82% 0.0034 247.86)',
          'base-300': 'oklch(95.15% 0.0046 258.32)',
          '--base-400': '90.94% 0.0058 264.53',

then I just 'extend' the base-400 into the tailwind colours (along with my other custom colours):

    extend: {
      colors: {
        'primary-muted': 'oklch(var(--primary-muted) / <alpha-value>)',
        base: {
          '400': 'oklch(var(--base-400) / <alpha-value>)',
        },
        content: {
          '200': 'oklch(var(--content-200) / <alpha-value>)',
          '300': 'oklch(var(--content-300) / <alpha-value>)',
        },
        light: 'oklch(var(--light) / <alpha-value>)',
        muted: 'oklch(var(--muted) / <alpha-value>)',
      },
}

Using this approach you can put as many extra base numbers as you want (-500,-600,-700...).

They are used in the same way all the other colours are used: bg-base-400, text-content-200, bg-muted/80 e.t.c.

[saadeghi]

This will be even easier in daisyUI 5

[firdaus-aziz]

1. Date picker and time picker (as @Tekechen, @vipincode, and @Sztacho already suggested)
2. Responsive table (table in widescreen, then card in table/phone). Example https://vanillaframework.io/docs/base/tables#responsive

I don't think VanillaFramework use any JS to achieve this. I am kind of assuming it's feasible for DaisyUI too.

Lastly, thank you so much for all your hard work and sacrifices in creating this for us.

[brpowell]

Just wanted to say thank you so much for this incredible project. Looking forward to the animated progress components ❤️

[Avaray]

Today I discovered animated radial progress. Feels very nice imo.
Progress bars should have the same speed of animation.

[Mashiane]

Hi there

The CDN 9 version is listed but link is broken, can you please advise?

https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.9/daisyui.css

[saadeghi]

Will be released today. I deployed the site with the new version early 😅

[mcullifer]

Should the soft variants for buttons, badges, etc have the bg and text colors inverted on light theme? Or maybe have their background a little bit darker? Maybe it's just me but they seem hard to see against the light backgrounds.

[saadeghi]

• It depends on the theme colors
• You shouldn't use badge-neutral badge-soft on top of base-100 color. It's not readable as you can see in the screenshot. but it is expected behavior. neutral color is always dark. badge-neutral badge-soft exists to be used on places that is readable. For example on top of an image or on top of bg-info, etc…
• soft variants are not guaranteed to look readable with any color on any background color because it uses same text color for background with less opacity. For example if primary is a dark purple, base-100 is black, badge-primary badge-soft on bg-base-100 won't be readable but that's not where you should use it anyway. Instead use it on a background with enough contrast.
• All color pairs of all themes pass WCAG minimum contrast but all colors on base-100 are not a color pair. base-content on base-100 is a pair.
• we can't "invert" colors automatically because we don't know what color you're choosing. daisyUI is a build-time dependency. Your colors are CSS variables which can change at runtime.

[ErekleModebadze]

Hello, exclude: rootscrollgutter, rootcolor; doesn't work if
@plugin "daisyui" { themes: light --default; } applied too, i mean it works alone but not when only light theme is applied like this

@plugin "daisyui" {
    themes: light --default;
    exclude: rootscrollgutter, rootcolor;
}

I am using it in vue js

[Mashiane]

How does one do this using CDN version?

exclude: rootscrollgutter, rootcolor;

[saadeghi]

@ErekleModebadze it works: https://play.tailwindcss.com/3nm3fk2X4g?file=css
If it's not working for you please share a minimal reproduction link.

@Mashiane With CDN, there's no build step. so you can't use @plugin. But you can customize the CDN file here: https://v5.daisyui.com/docs/cdn/

[ErekleModebadze]

Yeah, I checked it. now it works. Thanks!

[vuvandong]

Add class no-animation from daisy ui v4, please!

[saadeghi]

🎉 daisyUI 5.0 is ready!!
Thank you all for the feedbacks, bug reports, contributions and PRs 💚

Video	https://www.youtube.com/watch?v=bYznFmzL820
Release notes	https://daisyui.com/docs/v5/
Upgrade guide	https://daisyui.com/docs/upgrade/
Changelog	https://daisyui.com/docs/changelog/
Install guide for frameworks	https://daisyui.com/docs/install/

[yoshi6jp]

Congratulations daisyUI 5.0 release! ㊗️
A library for React server component has been released at the same time.
Please use it if you like.

• Storybook
• rsc-daisyUI

[CoderJo-Pro]

Can we explain a little bit in the upgrade doc?

@import "tailwindcss";
@plugin "daisyui";

I was scared by the new import method, but finally accepted daisy5 after learning it's the way of how tailwindcss@5 works.

[saadeghi]

It's explained here
https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives

[CoderJo-Pro]

Yes, you're exactly correct. Just a mention of frustration that those who first get into v5 might have, like me.

[conman124]

A couple pieces of feedback after starting to migrate to v5:

1. The docs need an example of radio buttons + a label. While I can hack something together without a problem, it's unclear to me how I am "supposed" to add labels to my radio buttons.
2. Along that same line, I'm struggling to understand what the difference between .fieldset-label and .label is and when I should use one vs the other. For example, in the upgrade guide about the removal of .form-control (https://daisyui.com/docs/upgrade/#other-removals) it says to use .label inside a fieldset, but that seems sort of strange. Frankly, I'm not even sure if .label and .fieldset-label are intentionally different as the difference between them is very small.
3. This is not something that is likely to change so late in the game, but I personally am not a fan of how small the labels are, especially when paired with checkboxes or radio buttons, or how light the label text is. This is not such a big deal, as I'm sure I can tweak the styles in my own css.

[thiagomajesk]

@saadeghi I ended up addressing the fieldset + label as a documentation issue because I think we might solve this with examples and maybe (maybe), softly deprecate the overlapping functionality in the next minor version. Let me know if you want to keep this discussion contained in a specific place: #3573 👍

[eokic]

Is it possible to configure where/on which @layer DaisyUI components will be built? I don't like that it's on the same layer as utility classes as this can create specificity conflicts. Would much rather set it on a custom, intermediate level below utilities.

[saadeghi]

components should be in in components layer but Tailwind puts them in utilities layer.
Please upvote this issue tailwindlabs/tailwindcss#15045 and hopefully this will be fixed.

[alxNoComment]

On latest version

The size of the Join buttons is different when you add, for example, the btn-success class.
The size of the Join buttons is different regardless of whether you use the btn-square class or not.

 <div class="join">
                    <div class="join-item btn-xs btn btn-square" :class="ok ? 'btn-success' : 'bg-base-100'">↑</div>
                    <div class="join-item bg-base-100 btn-xs btn" inert>XBOX</div>
                    <div class="join-item bg-base-100 btn-xs btn btn-square">↓</div>
 </div>

[saadeghi]

it's the same size,
the border color of button and background color is a similar color so it's not visible. Which theme is this?

[alxNoComment]

halloween

---

but then add btn-soft on none active btn's (center, right) , again is similar size

It seems to me this is strange behavior.

[saadeghi]

I should probably adjust the background colors for halloween theme 👍
To be clear, again, size is correct, there's a border you can't see because your background color is same as the border color.

Here's your code:
https://play.tailwindcss.com/AjALWNfumA (I zoomed so you can see the dark border better)

[CoderJo-Pro]

A few days ago, I came across Flowbite while browsing, and it looks really nice. I started to think, "This is much better than my apps." At that moment, I remember browsing various UI libraries, hesitating with Vuetify, and ultimately deciding on Daisy. I realized why I chose to work with Daisy.

I love Daisy UI for its excellent, clean design and functionality. However, v5 changed a lot of components, such as the radios, checkboxes, and buttons. At the same time, the v5 update is necessary for many of us. It upgraded Tailwind CSS to v4 and includes fixes, like removing the redundant .menu padding.

Yes, it can be customized, such as #3246 (comment), which tries to mock the design of the v4 button. However, there are more components than just buttons. Why reinvent something we already had before? The v5 update is significant, but I still miss the elements from the previous version of Daisy very much. (Talk about this if you feel the same way.)

[vchirikov]

@saadeghi sorry, I don't get the example to be honest, it fixes .btn-ghost, but also changes how all buttons looks like in whole theme (not only .btn-ghost).
It also won't work on all dark themes.

I don't see anything strange

hover:.btn-ghost on light theme becomes darker (which is fine), but on dark themes it also uses darker color. (which is unreadable and causes weird looking border).

You can quickly determine if there is hover here? (theme dark)

Or here? (theme night)

In other hand light themes is ok and clearly readable:

@CoderJo-Pro solution to this (via @layer utilities) changes light theme too, which as my opinion is ok. It also looks worse than @saadeghi example

p.s. I need 2-3sec to see hover effect in first 2 examples.

p.p.s I don't think that checkboxes have problems, all other changes are ok as for me 🥇

[saadeghi]

• v5
• v4

v5 looks much much better. Are you sure? 😅
Anyway that's not a color change of checkbox tho. It was content color, it's still content color (not a hardcoded dark color)
In v5, the content color for dark theme were adjusted:
v4:

v5:

Here is the dark theme of v4 if you prefer those colors:
https://github.com/daisyui/v4-themes-for-v5/blob/master/dark.css

You can also customize it here and see the result: https://daisyui.com/theme-generator/

About the ghost button:

• I think we should fix the color of default button, because that's what we see when we hover the ghost button.
• We can't use CSS relative colors yet, Currently we support Safari 15.4+ and Chrome 111+. Relative colors requires Safari 16.4+ and Chrome 119+. I think we should wait more before using relative colors.
• Here's the issue I'm seeing with using a mix of --color-base-content for the button instead of --color-base-200:

Current color: https://play.tailwindcss.com/EgDZAoFY9Y?file=css
Using a mix of --color-base-content: https://play.tailwindcss.com/TTbw6EIOhF?file=css

On some themes bg color looks better (has better contrast), but on some themes it gets less contrast and gets less visible. Especially for theme that have less contrast between --color-base-content and --color-base-100 for example retro, coffee, dim, synthwave

I'm still looking for a formula that gives a good result for all combinations.

[vchirikov]

@saadeghi much better! note: it will break .btn-link a bit

[CoderJo-Pro]

• I think we should fix the color of default button, because that's what we see when we hover the ghost button.

I'm basically replicating the ghost button's behavior from v4, oklch(var(--bc) / .2) in short.

• We can't use CSS relative colors yet, Currently we support Safari 15.4+ and Chrome 111+. Relative colors requires Safari 16.4+ and Chrome 119+. I think we should wait more before using relative colors.

Aren't we using color-mix etc. all the time🤯? I'd like some clarification on this.

On some themes bg color looks better (has better contrast), but on some themes it gets less contrast and gets less visible. Especially for theme that have less contrast between --color-base-content and --color-base-100 for example retro, coffee, dim, synthwave

I'm still looking for a formula that gives a good result for all combinations.

I see. oklch(var(--bc) / .2) is why the v4 text color is low contrast; for now, I'll use the styles from https://play.tailwindcss.com/TTbw6EIOhF?file=css.

• Combine the pseudo element and the box shadow (let them both exist).

Could you provide a snippet for the mixed styles? I would greatly appreciate it ❤️

[saadeghi]

Aren't we using color-mix etc. all the time🤯? I'd like some clarification on this.

You're right. I forgot counting that in my previous comment 👍
Still color-mix has more browser support than relative color. color-mix works on Chrome 111+, relative color on Chrome 119+

To be clear, I am positive about using relative colors, it's been on daisyUI roadmap since last year and I was pushing it to the future. Now that support is slowly growing, we are almost ready to use it 👍

let them both exist
Well we can't have them both at the same time 😁 It would be hell to customize the colors for user.
But I will work on animating the width of the pseudo element 👍

[Kens-Jaswal]

Hi @saadeghi
working on svelte project, with following version of daisyUI and tailwindcss:

daisyUI: ^4.12.24
tailwindcss: ^3.4.17

after run this command: npx @tailwindcss/upgrade

getting following message:
≈ tailwindcss v4.1.3

│ Tailwind CSS v4.1.3 found. The migration tool can only be run on v3 projects.

______________________ below is the devDependancies from package.json

"devDependencies": {
"@eslint/js": "^9.24.0",
"@graphql-codegen/cli": "^5.0.5",
"@graphql-codegen/typescript": "^4.1.6",
"@graphql-codegen/typescript-operations": "^4.6.0",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.20.4",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"@types/eslint": "^9.6.1",
"@urql/svelte": "^4.2.3",
"autoprefixer": "^10.4.21",
"daisyui": "^4.12.24",
"dbmate": "^2.26.0",
"embla-carousel-svelte": "^8.6.0",
"eslint": "^9.24.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.1",
"globals": "^15.15.0",
"graphql": "^16.10.0",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.25.8",
"svelte-check": "^4.1.5",
"tailwindcss": "^3.4.17",
"typescript": "^5.8.3",
"typescript-eslint": "^8.29.1",
"vite": "^6.2.5",
"yup": "^1.6.1"
}

[saadeghi]

Is there an issue?

[Kens-Jaswal]

yes, not able to run my project..every time showing "Tailwind CSS v4.1.3 found. The migration tool can only be run on v3 projects." which is incorrect...tailwindcss have old version ("tailwindcss": "^3.4.17",) but showing latest...

[Kens-Jaswal]

apart from that, I created one new branch and updated both tailwind and daisyui...then also project is not working...its keep sending message for existing classes used like (text-success, bg-primary/30, font-black etc etc)

[CoderJo-Pro]

Looks like an issue I just met because I didn't @import "tailwindcss"; in that CSS file, which I linked from <style src="..."></style> in a Vue component.

[saadeghi]

Sir you posted this message 3 times in this repo. #3849 #3850

[delta6626]

Hi @saadeghi,
I've been using daisyUI a lot lately and absolutely loving it—great work!
I was wondering if there are any plans to introduce a color picker component in the near future?

[CoderJo-Pro]

Shouldn't it be a JS work? I have no clue how to make such a component with so many responsive values in CSS.

[millette]

@delta6626 See #115

[CoderJo-Pro]

Guys did you notice the new website is getting laggier while v4 is ok? Page loading speed is slower, and the animations are stuck. For example, the toggle on the v4 page has a smooth animation, but it's super laggy on the v5 page.

In my opinion, the CSS selectors are becoming too deeply nested, causing unnecessary, redundant, and complex selectors, which affects the performance.