Please move maxWidths to config or consider adding Tailwind preffix support

[vladrusu]

Issue: currently, maxWidths is hardcoded in /modal/src/ModalComponent.php as follows:

    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',
    ];

The thing is, there is no way to customize it. The thing is, I use Tailwind classes with tw- preffix in my code, so basically I have to adjust classes in modal.blade.php and modal.js with every new Wire Elements Modal version (overflow-y-hidden becomes tw-overflow-y-hidden in my code, for example).

Please consider allowing us - as I said earlier - to override maxWidths in config, or, alternatively, consider adding Tailwind preffix support.

Thanks!

Update: I ended up overriding modalMaxWidthClass in my code, as a work-around (to add tw- preffix to any Tailwind class):

    public static function modalMaxWidthClass(): string
    {
        return str_replace(':', ':tw-', parent::modalMaxWidthClass());
    }

[nrthbound]

This is still something that needs to be adjusted. Not sure forcing those defaults is the best approach, instead of just merging the attributes and letting people use their own classes to size their own modals.

[booni3]

Is there a way to adjust the width within the Pro Version? I want to make an almost full-screen modal for example. At the moment it is not possible to do unless I add in some custom/non-tailwind CSS.

[JayBizzle]

public static function attributes(): array
    {
        return [
            // Set the modal size to 2xl, you can choose between:
            // xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
            'size' => '7xl',
        ];
    }

[PhiloNL]

Is there a way to adjust the width within the Pro Version? I want to make an almost full-screen modal for example. At the moment it is not possible to do unless I add in some custom/non-tailwind CSS.

Yes, this is possible, you can create your own size mapping, the Pro version also includes a fullscreen option (https://wire-elements.dev/docs/getting-started/modal-component).

[ravindra135]

modalMaxWidth() This method is not working, anyone facing this same problem, kindly tell me how to solve it; There is no CSS conflicts, I have checked it;

[vladrusu]

Here is my solution (I use tailwind config-ed to use tw- preffix because otherwise happens to conflict with Bootstrap, which I also use). Basically, I made a TwModalComponent class, which overrides modalMaxWidthClass from the parent class (ModalComponent), adding tw- to all Tailwind classes. So, for example, sm:max-w-md md:max-w-xl becomes sm:tw-max-w-md md:tw-max-w-xl. Next, you'll extend all your modals from this class.

Here is the code:

app\Http\Livewire\TwModalComponent.php

<?php

namespace App\Http\Livewire;

use LivewireUI\Modal\ModalComponent;

class TwModalComponent extends ModalComponent
{
    public static function modalMaxWidthClass(): string
    {
        return str_replace(':', ':tw-', parent::modalMaxWidthClass());
    }
}

app\Http\Livewire\MyModal.php

<?php

namespace App\Http\Livewire;

//use LivewireUI\Modal\ModalComponent; use App\Http\Livewire\TwModalComponent as ModalComponent; use App\Rating;

class MyModal extends ModalComponent { public static function modalMaxWidth(): string { return 'xl'; }

... The rest of your code ... }

Note: Do not forget to safelist all the classes that you are using in tailwind.config.js.
> tailwind.config.js (root folder)

module.exports = { prefix: 'tw-', theme: { extend: { /fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], },/ }, }, content: [ //'./app/*/.php', './resources/*/.{php,html,js,vue}', ], // ModalUI safelist: [ 'sm:tw-max-w-sm', 'sm:tw-max-w-md',

    'md:tw-max-w-lg',
    'md:tw-max-w-xl',

    'lg:tw-max-w-2xl',
    'lg:tw-max-w-3xl',

    'xl:tw-max-w-4xl',
    'xl:tw-max-w-5xl',

    '2xl:tw-max-w-6xl',
    '2xl:tw-max-w-7xl',
],
corePlugins: {
    // https://tailwindcss.com/docs/preflight#disabling-preflight
    // if preflight is enabled, conflicts with Bootstrap
    preflight: false,
},
plugins: [
    //require('@tailwindcss/ui'),
    //require('@tailwindcss/typography'),
],

}

[rishabkapadia]

modalMaxWidth() This method is not working, anyone facing this same problem, kindly tell me how to solve it; There is no CSS conflicts, I have checked it;

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

More here: https://github.com/wire-elements/modal/issues/416

[PhiloNL]

Thanks, added the safelist to the readme.