Unable to change Modal Width

[cpiggott]

Hello! I've recently updated to TailwindCSS v3.0.0 + and cannot change the size of a modal anymore.

I'm unable to make a modal bigger than 448 pixels. No matter what I do.

I've tried setting the maxWidth in the model, I've added the array of max-w to the tailwind.config.js whitelist.

Not sure what else to try.

[PhiloNL]

Hi @cpiggott, If you can create a repository with a fresh install of Laravel, Livewire, and Tailwind and reproduce the problem, I'm able to investigate further.

[dhruva81]

I am also facing same issue. I have several modals with different width and they were working fine previously. But now.. all modals have same width. Not able to fix this issue :(

[jiaoliness]

Also have the same issue. Neither the config nor setting the modalMaxWidth property changes the size of the modal

[PhiloNL]

If they were working fine previously it must be related to something else given no recent changes were made to this component.

[rayehizoba]

I recently had this issue as well. This comment helped - https://github.com/wire-elements/modal/issues/150#issuecomment-1022171394

[dhruva81]

Thank you @rayehizoba

The issue is fixed by adding following in tailwind.config.js

safelist: [
   {
      pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
   },
],

[magarrent]

Thank you @rayehizoba

The issue is fixed by adding following in tailwind.config.js

safelist: [
   {
      pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
   },
],

Hey it works! Can you please update it to Readme?

[jeffchown]

Thanks for this!