Problem with Modal Size Assignment

[GusAlberto]

When I use the public static function attributes(): array within my component and set the 'size,' the modal ends up with a different size than the one chosen, and even when I run 'npm run dev,' the change is not applied.

I would like to know why this behavior is happening and if it's possible to have different sizes for parent and child modals.

Thanks!

[PhiloNL]

This is probably related to your tailwind config, I assume the CSS class is not included in your CSS.
Every modal can have it's own size.

[GusAlberto]

I understand, friend. Could you send me an example configuration for me to test in my project? Because I really don't know what to modify.

[PhiloNL]

You can find the configuration here:
https://github.com/wire-elements/modal#building-tailwind-css-for-production

Make sure you safelist the width you are using.

[GusAlberto]

It worked! Thank you for the help and attention. In the end, is this the only way to deal with this configuration? If so, I suggest paying more attention to this aspect in the project documentation. Best regards, my friend.

[liamseys]

@PhiloNL Can you send me an example how the safelist should look when I want to use all possible sizes?

 protected static array $maxWidths = [
        'sm' => 'sm:max-w-sm',
        'md' => 'sm:max-w-md',
        'lg' => 'sm:max-w-md md:max-w-lg',
        'xl' => 'sm:max-w-md md:max-w-xl',
        '2xl' => 'sm:max-w-md md:max-w-xl lg:max-w-2xl',
        '3xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl',
        '4xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl',
        '5xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl',
        '6xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl',
        '7xl' => 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl',
    ];

Do I have to add all these classes to the safelist?

[PhiloNL]

You can safelist the classes or have Tailwind can your PHP files as well, e.g.:

content: [
      './app/Livewire/**/*.php',
      './vendor/wire-elements/modal/resources/views/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
    ],