[BUG] - Modal not applying nextui tailwind plugin theme custom properties

[josegutierro]

NextUI Version

2.1.13

Describe the bug

When using Modal component theme overrides on tailwind.config are not being applied, things like colors, border radius are displayed like base default theme.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Customize your tailwind.config.js with some nextui theme
2. Use the modal component

Expected behavior

Primary button should be orange and radius smaller as defined on theme.

Screenshots or Videos

Operating System Version

MacOS

Browser

Chrome

[ZijiaZhang]

I had a similar issue, but I was able to fix it by adding 'bg-background text-foreground' class to the body.

[StephenDickens-WAG]

I'm having a similar issue using background gradients inside a Modal component. I was able to get my custom themes to work by programmatically setting the theme className on the body element, but for some reason the native tailwind gradient CSS variables aren't defined/applied correctly.

Gradients are working perfectly fine everywhere else in the app, as the following screenshot shows the native tailwind CSS variables are defined/applied correctly:

EDIT 1:

Since the theme colors work, I was able to get the gradient to work using inline styles along with the color variables. Still strange the native tailwind classNames didn't work though...

EDIT 2:

Looks like gradients work fine as long as you define the from-X% and to-X% classNames. So the only issue is the default tailwind CSS variables aren't defined/applied.