Can't provide a style to action buttons.

[abos-gergo]

Please provide the environment you discovered this bug in.

I am trying to style action and cancel buttons' background-color property with tailwind classes.

Description

The bg-zinc-400 class for example does not have an effect:

Because the [data-sonner-toast] [data-button] selector takes over.
This happens when unstyled is set to true as well.

The settings I am using:

[toastOptions]="{
        unstyled: true,
        classes: {
          toast: 'bg-blue-400',
          title: 'text-red-400',
          description: 'text-red-400',
          actionButton: 'bg-zinc-400',
          cancelButton: 'bg-orange-400',
          closeButton: 'bg-lime-400',
		  },
      duration: 100000,
	    }"

Please provide the exception or error you saw

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[felhag]

This is because tailwind 4 uses css layers. Unlayered css always takes precedence over layered css which is why this doesn't work anymore. @tutkli, are there any plans to add support for layered css?