Weird issue with modal if the `body` has no classes about tailwindcss-stimulus-components HOT 6 CLOSED

@rockwellll, I hit a similar issue today, but I believe your issue and mine are related to tailwind not picking up all the class names required by the modal component.

I think what is at issue is inset-x-0 not being compiled. I'm guessing the point of setting body to fixed is to get rid of scrollbars, but without inset-x-0, the content will shrink.

The fix is to add all or part of the component js files to the content sources.

module.exports = {
  content: [
    //...
    './node_modules/tailwindcss-stimulus-components/src/*.js'
  ]
}

Here is an example of the issue.

from tailwindcss-stimulus-components.

Hey @elalemanyo. Glad it helped you out.

No worries. I'm glad you turned in into a PR.

The changes you've made are outstanding. I like the fact you extracted the classes into a value so that it can be overriden easily.

Fantastic job!.

from tailwindcss-stimulus-components.

@rockwellll I was having the same issue, and your fix worked perfectly, thanks!
That's why I felt free to open a pull request, I hope you don't mind. If you can take a look at it and let me know what you think, would be great 🙂

Thanks!

from tailwindcss-stimulus-components.

@jaywhy you were right! Thanks!

from tailwindcss-stimulus-components.

When I apply the solution of @jaywhy it solves the issue, but then I get kind of dark gray layer on top of everything which also blocks the modal:

When I remove the line from tailwind config, this blocking layer is gone (but the original issue is back):

from tailwindcss-stimulus-components.

Before attempting @jaywhy's solution , I fixed it by adding w-full class to the body. That would fix this issue.

But the solution that @jaywhy mentioned in his comment is the right way to fix this. (I can confirm that fixed the issue too).

If you are only using the modal component, make sure to only include the modal.js file in the tailwind config (like below).

module.exports = {
  content: [
    //...
    './node_modules/tailwindcss-stimulus-components/src/modal.js'
  ]
}

I think we can close this ticket.

from tailwindcss-stimulus-components.