Width not working after latest update?

[seabasss]

After the latest update of either wire-elements modal or tailwind, my modals in all of my apps got a whole lot more narrow in size and using this doesn't seem to have any effect:

public static function modalMaxWidth(): string
{
    return 'xl';
}

Anyone know what changed in the latest update that I need to be aware of?
Im using tailwind JIT if that's of interest.

Edit // I reverted my composer file and only updated livewire elements modal and that is what's breaking it.

Thank you!

Edit 2 // This seems to be the difference:

Before update:

inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full sm:max-w-2xl

After update:

inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full sm:max-w-md md:max-w-xl lg:max-w-2xl

Edit 3 // I believe it's my JIT that needs to be updated with new classes. I found another thread about it on here. Sorry for duplicate. I think I got it.

[oliverbj]

@seabasss can you share your solution? I just upgraded to TailwindCSS 3, and I experience the same issue with the width.

[seabasss]

@seabasss can you share your solution? I just upgraded to TailwindCSS 3, and I experience the same issue with the width.

I’m not using tailwind 3 so not sure what to do there, but for me I had to make sure the cache was cleared for css (hehe) and I added this for JIT to find the classes:

{{-- modalwidth comment for tailwind purge, used widths: sm:max-w-sm sm:max-w-md sm:max-w-lg sm:max-w-xl sm:max-w-2xl sm:max-w-3xl sm:max-w-4xl sm:max-w-5xl sm:max-w-6xl sm:max-w-7xl md:max-w-sm md:max-w-md md:max-w-lg md:max-w-xl md:max-w-2xl md:max-w-3xl md:max-w-4xl md:max-w-5xl md:max-w-6xl md:max-w-7xl lg:max-w-sm lg:max-w-md lg:max-w-lg lg:max-w-xl lg:max-w-2xl lg:max-w-3xl lg:max-w-4xl lg:max-w-5xl lg:max-w-6xl lg:max-w-7xl xl:max-w-sm xl:max-w-md xl:max-w-lg xl:max-w-xl xl:max-w-2xl xl:max-w-3xl xl:max-w-4xl xl:max-w-5xl xl:max-w-6xl xl:max-w-7xl --}}
@livewire('livewire-ui-modal')

[seabasss]

@seabasss can you share your solution? I just upgraded to TailwindCSS 3, and I experience the same issue with the width.

I just upgraded to Tailwind v3 and adding the classes like I showed in the previous post still worked!

[spekkie2002]

For TailwindCSS 3 i added the following to my tailwind.config.js and it seems to do the trick

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