btn-disabled not work for Arbitrary

[cqh963852]

What version of Tailwind CSS are you using?

4.0.12

What build tool (or framework if it abstracts the build tool) are you using?

nextjs 15.2.1

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome

What operating system are you using?

mac sequoia 15.3

For example: macOS, Windows

Reproduction URL

https://github.com/cqh963852/daisyui-demo

Describe your issue

btn-disabled not work for Arbitrary

bg-primary works

[wongjn]

This is due to the fact that .btn-disabled is not registered by Daisy UI as a utility class name of itself. Daisy UI does something akin to:

addComponents({
  ".btn": {
    // …
    "&:is(:disabled, [disabled], .btn-disabled)": {
      // …
    },
  },
  ".btn-primary": {
    // …
  },
});

With the way the legacy addComponents() API interface works, only the top-level selectors get registered as known class names to Tailwind. I believe it would be out of scope to get Tailwind to delve into deeper selectors, especially since this only exists as a backwards-compatibility layer.

You could consider raising this issue with Daisy UI.

Or otherwise, you can copy the CSS into your own utility class name:

@utility btn-disabled {
  @layer components {
    &:not(.btn-link, .btn-ghost) {
      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
      box-shadow: none;
    }

    pointer-events: none;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);

    @media (hover: hover) {
      &:hover {
        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
        pointer-events: none;
        --btn-border: #0000;
        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
      }
    }
  }
}

[cqh963852]

Sorry, I submitted the issue to the wrong repository