Filament•8mo ago

wire-elements-modal issue

I implemented wire-elements-modal and it works fine except that I am not able to adjust the size of the modal as mentioned in the doc. I created a Filament theme as described in the the docs and then add

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

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

in tailwind.config.js of the theme, but the modals are always with same size even if I change it in the component. Does anyone made it working properly within filament ?

Solution:

Made a PR, Let's see 😇

Jump to solution

11 Replies

David VincentOP•8mo ago

Any thoughts ?

awcodes•8mo ago

Make sure you are also including the wire element’s views in your theme’s tailwind config.

David VincentOP•8mo ago

Thanks but included, weird situation

Raziul Islam•8mo ago

still not working as expected?

David VincentOP•8mo ago

Raziul Islam•8mo ago

can you show the tailwind config?

David VincentOP•8mo ago

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/App/**/*.php',
        './Modules/**/Filament/**/*.php',
        './Modules/**/Livewire/**/*.php',
        './Modules/**/resources/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/**/*.blade.php',
        './vendor/awcodes/filament-versions/resources/**/*.blade.php',
        './vendor/bezhansalleh/filament-language-switch/resources/views/language-switch.blade.php',
        './vendor/solution-forest/filament-tree/resources/**/*.blade.php',
        './vendor/archilex/filament-filter-sets/**/*.php',
        './vendor/webbingbrasil/filament-maps/resources/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
    ],
    safelist: {
        pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
        variants: ['sm', 'md', 'lg', 'xl', '2xl']
    }
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/App/**/*.php',
        './Modules/**/Filament/**/*.php',
        './Modules/**/Livewire/**/*.php',
        './Modules/**/resources/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/**/*.blade.php',
        './vendor/awcodes/filament-versions/resources/**/*.blade.php',
        './vendor/bezhansalleh/filament-language-switch/resources/views/language-switch.blade.php',
        './vendor/solution-forest/filament-tree/resources/**/*.blade.php',
        './vendor/archilex/filament-filter-sets/**/*.php',
        './vendor/webbingbrasil/filament-maps/resources/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
    ],
    safelist: {
        pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
        variants: ['sm', 'md', 'lg', 'xl', '2xl']
    }
}

Raziul Islam•8mo ago

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/App/**/*.php',
        './Modules/**/Filament/**/*.php',
        './Modules/**/Livewire/**/*.php',
        './Modules/**/resources/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/**/*.blade.php',
        './vendor/awcodes/filament-versions/resources/**/*.blade.php',
        './vendor/bezhansalleh/filament-language-switch/resources/views/language-switch.blade.php',
        './vendor/solution-forest/filament-tree/resources/**/*.blade.php',
        './vendor/archilex/filament-filter-sets/**/*.php',
        './vendor/webbingbrasil/filament-maps/resources/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
    ],
    safelist: [{
        pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
        variants: ['sm', 'md', 'lg', 'xl', '2xl']
    }]
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/App/**/*.php',
        './Modules/**/Filament/**/*.php',
        './Modules/**/Livewire/**/*.php',
        './Modules/**/resources/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/**/*.blade.php',
        './vendor/awcodes/filament-versions/resources/**/*.blade.php',
        './vendor/bezhansalleh/filament-language-switch/resources/views/language-switch.blade.php',
        './vendor/solution-forest/filament-tree/resources/**/*.blade.php',
        './vendor/archilex/filament-filter-sets/**/*.php',
        './vendor/webbingbrasil/filament-maps/resources/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
    ],
    safelist: [{
        pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
        variants: ['sm', 'md', 'lg', 'xl', '2xl']
    }]
}

Can you give it a try?

David VincentOP•8mo ago

Thank you very much! a mistake in the documentation

Raziul Islam•8mo ago

not a mistake, it is for older TW version

Solution

Raziul Islam•8mo ago

Made a PR, Let's see 😇

Gaming

Programming

wire-elements-modal issue