Shadow from modal inherited on inputs inside that modal

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.

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

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