excid3 / tailwindcss-stimulus-components

So. I was in the process of upgrading both tailwind and this package. After upgrading i found out that on pages where the body tag has no classes attached to it the modal would "push" the elements of the page into the left side. But, if i just add the a "class" to the body tag it stops doing this.

Screen.Recording.2022-02-02.at.15.00.42.mov

I think it might have to do with this but not quite sure yet.

tailwindcss-stimulus-components/src/modal.js

Line 126 in 5e138ab

document.body.classList.add('fixed', 'inset-x-0', 'overflow-hidden');

@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!

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

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

@jaywhy you were right! Thanks!

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):

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.

Modals now use the <dialog> html element so they're simpler to style now.

Weird issue with modal if the `body` has no classes