modalMaxWidth() not working with tailwind 3. #157

azmilazizi · 2022-01-31T05:59:49Z

azmilazizi
Jan 31, 2022

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 · 2022-02-25T09:14:13Z

yohannes81
Feb 25, 2022

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

0 replies

jvpaul05 · 2022-02-27T16:19:10Z

jvpaul05
Feb 27, 2022

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

0 replies

PhiloNL · 2022-02-28T09:53:28Z

PhiloNL
Feb 28, 2022
Maintainer

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

0 replies

rbruhn · 2022-03-02T23:19:16Z

rbruhn
Mar 2, 2022

@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>

8 replies

marcdegagne Mar 9, 2022

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

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 May 6, 2022

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 · 2023-02-05T22:34:02Z

vlados
Feb 5, 2023

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

3 replies

gassema23 · 2023-03-03T19:31:34Z

gassema23
Mar 3, 2023

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

0 replies

Uh oh!

modalMaxWidth() not working with tailwind 3. #157

Uh oh!

Uh oh!

Replies: 6 comments · 11 replies

Uh oh!

Uh oh!

Uh oh!

PhiloNL Feb 28, 2022 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 6 comments 11 replies

PhiloNL
Feb 28, 2022
Maintainer