Filament•4mo 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 Vincent•4mo ago

Any thoughts ?

awcodes•4mo ago

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

David Vincent•4mo ago

Thanks but included, weird situation

Raziul Islam•4mo ago

still not working as expected?

David Vincent•4mo ago

Raziul Islam•4mo ago

can you show the tailwind config?

David Vincent•4mo 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•4mo 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 Vincent•4mo ago

Thank you very much! a mistake in the documentation

Raziul Islam•4mo ago

not a mistake, it is for older TW version

Solution

Raziul Islam•4mo ago

Made a PR, Let's see 😇

Gaming

Programming

wire-elements-modal issue