Shadow from modal inherited on inputs inside that modal

[SimonPrague]

What version of Tailwind CSS are you using?

2.2.6

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

vue-cli

What version of Node.js are you using?

latest

What browser are you using?

Chromium

What operating system are you using?

Fedora

Describe your issue

Everything work fine but after the latest release things got weir all over our project. We have pretty standard installation of Tailwind and CSS so I thought I should report this.

We had to go back to 2.2.4 so the problem might be already at 2.2.5

This is what's happening:

When I focus on element in modal it suddenly inherits a shadow-xl style. Which is on parent modal. It's pretty weird.

[rainerborene]

I think this is related to #5039 and recent performance changes which broke some stuff.

[adamwathan]

Hey! Any reason you deleted the reproduction field rather than providing one? That makes it extremely hard for me to be able to help.

Even just showing me the HTML for the modal and the input would help, but half of the classes on the input are cut off in the screenshot. Please help me out even a tiny bit here 🙃

[SimonPrague]

I'm really sorry I'm not able to provide a reproduction repo. If this problem lasts longer than a week I will find the time and do this for you. Our startup is growing too fast and things are pretty intense so I apologize for not having the time to set this up. I felt that it's worth reporting even without it.

[adamwathan]

@SimonPrague I understand — can you at least tell me what classes are on the input and whether or not you have the forms plugin installed?

[adamwathan]

I am trying to recreate the problem not but seeing it, what am I doing differently than you?

[adamwathan]

Reverted the main piece of the changes that cause this stuff for v2.2.7, check that out and see if it helps. Hopefully can resolve the underlying issues and bring these improvements back soon.

Would still be super helpful to have some more information though, otherwise this is gonna be a problem for you again since I have no idea what to do to see the issue you're seeing :/

[mxlje]

Hi, I have the same problem and have reproduced it with v2.2.6 here: https://codepen.io/mxlje/pen/KKmbRGZ

Remove the shadow-xl class from the wrapper and you can see that the input no longer has a shadow when focused.

While it seems fixed in v2.2.7, the underlying issue actually comes from tailwind-forms. As you can see in the example, the input itself doesn’t have any classes applied except for the default styles that come from tailwind-forms.

The example was created with tailwind v2.2.6 and tailwind-forms v0.3.3.