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.

[saadeghi]

https://v5.daisyui.com/components/calendar/

[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.

[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!

[mathlouly]

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.

[mathlouly]

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)

[mathlouly]

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.

[Megaemce]

Little bug: when chat has header the avatar is aligned lower than when the header is not there. It was ok in version 4.

[saadeghi]

will be fixed in next beta

[alxNoComment]

beta v6
Problem with size

1. a href with class btn
2. tablist with input type=radio with class tab
   I think it's a problem that btn != btn. How can I make them the same size?
   

[saadeghi]

The height is same, but second one (assuming it's tabs-box) has a padding which you can customize or remove using p-0
https://play.tailwindcss.com/fB9lHSHfmv

But in general, I wouldn't put them all next to each other because if one is button and the other is tab, it would be confusing for the user and they would assume they all have similar functionalities.

[McNerdius]

Suggestion: Semantic HTML element support for .breadcrumbs & .menu (& others ?).

I try to use semantic elements where possible. For instance, <menu>:

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

I'm not a pro - there may be a reason i'm unaware of to avoid it. If that's not the case then i feel like i should be using it (where appropriate of course), and thus it should be supported.

Thanks for your time !

[angelmarfil]

Generally the class adds the style, not the element itself, so you can use whatever semantic tags you consider necessary.

[saadeghi]

✅ menu class name already works with both <ul> and <menu> so you can use either.
⏳ breadcrumbs class name only works with <ul>, <ol> right now but I will add <menu> support in the next beta release.

https://play.tailwindcss.com/nPl9nuMzjI

[najibghadri]

I like the new version but please.. fix the hover and focus states for mobile.
It's such a basic requirement nowadays but most UI libs miss dealing with this UX.. DaisyUI v4 actually works very well and doesn't have this stuck focus and hover states. Please fix this for v5 too. I know you probably made extra effort to introduce these but I think I'm not the only one who thinks it's terrible UI/UX on mobile web.

Screen.Recording.2025-02-07.at.20.58.18.mov

[saadeghi]

Will be fixed in next beta. Let me know if there's anything else

[najibghadri]

Will be fixed in next beta. Let me know if there's anything else

You're amazing tashakular!

[stephannv]

It would be nice to have a base-content-200, base-content-300 (or something like text-muted), something to help to build secondary text easily. eg.

I know we can use something like text-slate-500 or define our own colors on tailwind (this is what I'm doing) but I think it is a nice to have feature by default.

[alxNoComment]

im use text-current/60

[CoderJo-Pro]

I thought about this when I started using Daisy v4. I searched relatively darker text on Daisy's website, and found it used filter: contrast(). In v5, the prose text is set to color: var(--tw-prose-body), where --tw-prose-body is a mix of base-content and some transparency. Both methods are pretty good, but adding these as official functionality is still considerable. (I mean, where are you @saadeghi #3246 (comment))

[saadeghi]

A new color name like text-muted is not good enough, because what if we want it darker? Or lighter?
What if we need 4 different shades of text color...
What if we want primary color for a text but muted...
What if we want info-content color of top of info, but muted

Using opacity modifier like base-content/60 is generally a better approach.

• It's easy to use.
• It's predictable.
• It's easy to customize and we can use any opacity value.
• we can use it for any color, either text color of background color.
• if gives the same output, especially with how Tailwind CSS 4 uses CSS color mix to generate the opacity value.

[saadeghi]

I added a section to docs, with visual examples: https://v5.daisyui.com/docs/colors/#color-opacity-and-muted-colors

[BakirGracic]

Responsive navbar (links in center on >tablet and links in hamburger on <mobile) with ONLY 1 link tree/list to save linkjuice for SEO?!

SEO expert told me to remove the second link set on our project (in current versions 4 & 5 there are 2 separate link <ul>'s for both mobile and desktop menus). Supposedly this uses slightly more linkjuice and wastes it for the duplicate link set.

Is this even possible whitout JS? Links should somehow (by CSS) move to hamburger menu from navbar-center div

çok sağol! v5 is amazing!

[saadeghi]

The style is different and the placement is different so it needs to be a different element. If you're using Vue, Svelte, React etc, there are portal, teleport or similar solutions to conditionally move the same element to a new place.

However,

SEO expert told me to remove the second link

That's a myth. The duplication of a link is natural and search engines would never punish you or de-value your links because of duplication. You can see this in every site on the highest ranking sites on the Internet. There are same links, repeating over and over on navbar, sidebar, footer, breadcrumbs, dropdowns, even in the content... That's perfectly normal.

To examine SEO problems (which doesn't include this) you can use tools like Ahrefs or Google Search Console.

[CoderJo-Pro]

You might need this if you feel weird with the button-hover effect like me but want to work with v5. I came out with this snippet (in the CSS section) to override the base-content mixing when btn-ghost hovering while keeping btn-primary etc. compatible with btn-ghost. See #3246 (comment)

[Megaemce]

In the dropdown's doc there is small typo in the JSX code

the class should be changed to className as it's clearly JSX example

[Megaemce]

It's seems that it's actually more complex issue, as you have some kind of html to jsx translator that doesn't pickup the class when it's in the new line. Same issue with the code can be seen here 🤔

[saadeghi]

Yeah that's a problem of the function I need to fix

[millette]

That's a react thing, not specific to jsx. For instance, I use solidjs and class works perfectly. Maybe that could be renamed "React"? In any case, not a big deal for me, I generally copy the html.

[BakirGracic]

seen many more occurances of class insead className for JSX code example for multiple components... hopefully it will be fixed when saadeghi fixes that function

[BakirGracic]

is this expected behaviour for breadcrumbs component in "daisyui": "^5.0.0-beta.8"?

beginning of component gets clipped, not visible on scroll. end is visible fully. removing margins doesn't change anything...

code example (jsx from next.js app)

return (
	<div className='breadcrumbs mx-4 my-6 text-sm'>
		<ul className='justify-center'>
			<li>
				<Link href='/'>
					<HomeIcon className='size-4' />
					{t('homepage')}
				</Link>
			</li>
			{links.map(({ href, label }, index) => (
				<li key={index}>
					{href === null ? (
						<p className='text-primary'>
							<GlobeAltIcon className='size-4' />
							{label}
						</p>
					) : (
						<Link href={href}>
							<GlobeAltIcon className='size-4' />
							{label}
						</Link>
					)}
				</li>
			))}
		</ul>
	</div>
);

[BakirGracic]

additional question here so i dont publish another comment:

have you thought about adding styles for custom scrollabrs?

[saadeghi]

code example (jsx from next.js app)

Can you share the output HTML from the browser? You can share it here

have you thought about adding styles for custom scrollabrs?

You can change scrollbar color using scrollbar-color

:root{
  scrollbar-color: blue yellow;
}

Or [scrollbar-color:blue_yellow] class name.

Don't use ::-webkit-scrollbar
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

[BakirGracic]

Can you share the output HTML from the browser?

Here's the rendered HTML from Elements in DevTools @saadeghi

https://play.tailwindcss.com/wQ1PdQb6U6

Please don't tell me I messed up on my end with css 🫣

You can change scrollbar color using scrollbar-color

I've researched the matter about scrollbars. I don't see the need for DaisyUI scrollbar abstractions/components since the scrollbar API is poor, in my understanding. Thanks anyway!

[saadeghi]

https://play.tailwindcss.com/wQ1PdQb6U6

Just remove the justify-center.
https://play.tailwindcss.com/nxOjnaP3yG

[eokic]

@saadeghi why do you modify the --root-bg when certain elements like drawers are open? You already have overlay elements as far as I can see. This just introduces unnecessary complexity, e.g. right now I'm making a theme switcher drawer, and the data-theme changes cannot be previewed correctly/in realtime because of:

:where(:root:has(.modal-open,.modal[open],.modal:target,.modal-toggle:checked,.drawer:not(.drawer-open)>.drawer-toggle:checked)) {
  --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
}

[eokic]

Thank you for clarifying! As I generally try to stay with the framework as much as possible, I'd prefer not to remove these (and reinvent the wheel) unless forced to. As you have deeper insight in the inner workings here, do you foresee a fix/change in the near future which could alleviate this issue or is it an inescapable price to pay for the gutter compensation?

[saadeghi]

Is there a delay for color change?
Which browser? Can you share a short video?

[eokic]

Sure thing, macOS, Chrome 133.0.6943.99

CleanShot.2025-02-18.at.11.48.07.mp4

Let me know if you need any more info. I was unable to add JS quickly to play.tailwind to confirm.

[saadeghi]

@eokic Make sure data-theme is in <html> tag (not <body> or <div> or etc)

[eokic]

Oh, interesting, thank you! It definitely does solve my issue on this project as I can remove the company-wide, standard scope/prefix completely from the build. Apologies for not mentioning it earlier as this was so normalized, I completely forgot it was even a thing.

But just to throw it out there in case you find the info useful, we often do incremental refactors on larger codebases so all of our builds are scoped under some prefix (specifically with postcss-prefixwrap as we don't want to write utilities like prefix-p2 etc.). This means nothing would be applied for <html class='prefix' data-theme>...; would only work for <html class='prefix'><body data-theme>.... A more realistic usecase though would be that both the prefix and the data-theme are applied somewhere deeper in the hierarchy.

[alxNoComment]

"daisyui": "^5.0.0-beta.6",
wrong color for checkbox with checked (active)
<input type="checkbox" class="btn btn-secondary btn-xs" :aria-label="val" :value="val" v-model="selected" />

No checked - all okey:

checked - wrong color (from primary)

[saadeghi]

It becomes primary when checked. Which color do you expect in this situation? If it stays secondary, it wouldn't be visible 🤔

[alxNoComment]

expected "btn-active"

btn-active btn-secondary

<button class="btn btn-active btn-secondary">Secondary</button>

[alxNoComment]

"daisyui": "^5.0.0-beta.6",

should it work like this? The select on the left side adds a barely visible outline when use with label

                <label class="select w-fit">
                    <span class="label">Decade</span>
                    <select class="select" v-model="filter.decade">
                        <option :value="null">ALL</option>
                    </select>
                </label>

if use without class "select" on select tag then different sizes

                <label class="select w-fit">
                    <span class="label">Decade</span>
                    <select class="" v-model="filter.decade">
                        <option :value="null">ALL</option>
                    </select>
                </label>

[saadeghi]

That's an issue indeed. Thnaks.
will be fixed in the next beta (soon)

[vish404]

This might already be possible to do, but here you go:

Can the rating component modified to accept negative ratings too?

Something like: -2, -1 0, 1, 2.

The color starting will be from 0.

[saadeghi]

How do you want it to look like? Can you share a screenshot or a design concept?

[Megaemce]

With the beta-8 suddenly I start getting error message on compilation. I use the latest tailwind + tailwind/postcss - 4.0.8

[saadeghi]

I need a reproduction link so I can debug this

[millette]

@Megaemce are you also using cssnano or autoprefixer postcss plugins?

[Megaemce]

@Megaemce are you also using cssnano or autoprefixer postcss plugins?

not at all.

I need a reproduction link so I can debug this

The thing is... it works in production, and was working last week. Just came up from holiday and the stuff is not working in dev... 🤔

[saadeghi]

There is a bug about this in Tailwind CSS 4.0.7 and 4.0.8.
I reported it, it is fixed and merged already. So it is expected to be fixed in Tailwind CSS 4.0.9 soon.

[alxNoComment]

What is the way to use tabs[input_radio] with icons in daisyui?

div.tabs{
<span><i :class="fa fa-icno"></i><input type="radio" name="my_tabs_1" class="tab" aria-label="" /></span>
}

I will get this with wrong underline:

if i add tab class to <span>
I will get this:

if wrapp to label and remove class "tab" on input
I will get this:
<label class="tab">

Expected result:

[saadeghi]

The tab content with radio inputs can have text only.
Because it's not possible to put HTML tags inside a HTML <input>. We can only have :before and :after which are both being used already (one for text, the other for the border).

To add icons use this: https://v5.daisyui.com/components/tab/#border (you can add anything in that HTML)
And toggle the content of the tab using JS.