maxWidths have to be added to safelifst

[laraben]

Hi,

I have to add
safelist: [
'sm:max-w-sm',
'sm:max-w-md',
'md:max-w-lg',
'md:max-w-xl',
'lg:max-w-2xl',
'lg:max-w-3xl',
'xl:max-w-4xl',
'xl:max-w-5xl',
'xl:max-w-5xl',
'2xl:max-w-6xl',
'xl:max-w-5xl',
'2xl:max-w-7xl',
],

to my tailwind config or else it always shows sm:max-w-sm.
Tailwind seems to remove these classes as they are added after the page loads

[fvanzeijl]

Hi,

I think the documentation is not clear enough in that point:
You have to safelist all classes of the the class-string for the maxWidth-Property which been set by the modal-component:
https://github.com/wire-elements/modal/blob/main/src/ModalComponent.php#L18-L27

So default max-width-property is 2xl which means the safelist should look like

safelist: [
'sm:max-w-md',
'md:max-w-xl',
'lg:max-w-2xl'
]

If you set another default-width in config or in your modal-component itself you have to safelist the equal classes from the given link above.

OR - if you would cover all max-w-classes in all responsive-variants without taking care of any max-width config:

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

Hope that helps.

[sourcejonathan]

thanks, bro!