modalMaxWidth() not working with tailwind 3.

[azmilazizi]

Hello guys, i cannot change wire-elements modal width.
Im using "tailwindcss": "^3.0.16",

Few days ago i tried
safelist: [ "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-lg", "md:max-w-xl", "lg:max-w-2xl", "lg:max-w-3xl", "xl:max-w-4xl", "xl:max-w-5xl", "2xl:max-w-6xl", "2xl:max-w-7xl'", ],
in my tailwind.config.js and it worked. Im not sure what did i changed then but it didnt work now. I have also tried this
safelist: [ { pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/, variants: ['sm', 'md', 'lg', 'xl', '2xl'], }, ], but nothing changes. Please send help.

Currently my config file is as such

`const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php',
'./vendor/laravel/jetstream/**/.blade.php',
'./storage/framework/views/.php',
// './resources/views/**/.blade.php',
],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},

plugins: [
    require('@tailwindcss/typography'),
    require('daisyui'),
],

daisyui: {
    themes: [
        'light',
        'dark',
    ],
  },

};
`

[yohannes81]

same problem

it works only if you use <script src="https://cdn.tailwindcss.com"></script>

but with classic laravel/tailiwnd install (https://tailwindcss.com/docs/guides/laravel) dosen't works

I don't know the reason

[jvpaul05]

Same problem, please share if you fix this. Thank you.

[PhiloNL]

This is my tailwind config and it works fine with Tailwind 3:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {

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

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    safelist: [
        "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"
    ],

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
};

[rbruhn]

@PhiloNL I'm using jetstream and tried your config. I still can only get 28rem max width on my modals.
Below is the div for the modal in the inspection panel. This is with setting 7xl. When I use "sm" it's only 24rem max.

Any ideas?

<div x-show="show &amp;&amp; showActiveComponent" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-bind:class="modalWidth" class="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-3xl xl:max-w-5xl 2xl:max-w-7xl">
                                    <div x-show.immediate="activeComponent == '43d033e972783a7fbdf18cb5ea2468ed'" x-ref="43d033e972783a7fbdf18cb5ea2468ed" wire:key="43d033e972783a7fbdf18cb5ea2468ed">
                        <div wire:id="8OX7KlHjOhoCEDryVzTs">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sem viverra aliquet eget sit amet tellus cras. Quisque non tellus orci ac auctor. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Eu ultrices vitae auctor eu. Tellus in hac habitasse platea. Varius sit amet mattis vulputate enim. Tincidunt dui ut ornare lectus. Id aliquet risus feugiat in ante metus dictum at tempor. Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Rutrum quisque non tellus orci ac auctor. Eget magna fermentum iaculis eu non diam. Nunc eget lorem dolor sed viverra ipsum. Non sodales neque sodales ut etiam sit.
<!-- Livewire Component wire-end:8OX7KlHjOhoCEDryVzTs -->                    </div>
                            </div>

[marcdegagne]

Hey...
Had the same issue after updating my project including:

• Breeze 1.8
• wire-elements/modal to 1.0.5
• laravel 9.0
• livewire 10.1.2

Setting up the $maxWidths property as @rbruhn got the widths working

Thanks

[jeffchown]

Thanks, @rbruhn !

[Desoleh]

Thanks @rbruhn it's work for me!

[shokanshi]

Though @rbruhn solution worked on desktop screen, it did not worked on certain mobile screens.

After some testing, the solution I found to be working across all device screens (portrait + landscape mode) is to update the safelist in the tailwind config to the following:

safelist: [
      "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-lg",
      "md:max-w-xl",
      "lg:max-w-2xl",
      "lg:max-w-3xl",
      "xl:max-w-4xl",
      "xl:max-w-5xl",
      "2xl:max-w-6xl",
      "2xl:max-w-7xl",
      "overflow-y-hidden"
  ],

[cjmellor]

Similar to @shokanshi this worked for me

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',
    '2xl:max-w-6xl',
    '2xl:max-w-7xl'
],

This matches the classes supplied in the vendor/wire-elements/modal/src/ModalComponent.php file.

[vlados]

You need to add vendor/wire-elements/modal/src/ModalComponent.php to the content array in tailwind.config.js

    content: [
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './vendor/wire-elements/modal/src/ModalComponent.php',
    ],

because the regex is searching for css class names, but you define it in the php

[Kenny201]

It would be cool if I added this to the github readme)))

[chuiw18]

that fixed it!! thanks

[gassema23]

work fine with me, here my tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    presets: [require("./vendor/wireui/wireui/tailwind.config.js")],
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        // WIRE UI
        "./vendor/wireui/wireui/resources/**/*.blade.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/View/**/*.php",
        // Powergrid
        "./app/Http/Livewire/**/*Table.php",
        "./vendor/power-components/livewire-powergrid/resources/views/**/*.php",
        "./vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php",
        // Modal
        "./vendor/wire-elements/modal/src/*.php",
        "./vendor/wire-elements/modal/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
    ],
    safelist: [
        {
            pattern:/(max|min)-(w)-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ["sm", "md", "lg", "xl"],
        },
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Figtree", ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [
        require("@tailwindcss/forms")({
            strategy: "class",
        }),
        require('@tailwindcss/aspect-ratio')
    ],
};