Modal opened bg-white become transparant..

[AlnThea]

sir, im here again.... found some bug?

the story start here...

before, im making some issue about sfaelist not work, and following the tutorial about safelist in tailwind 2 month ago, but its seem not work, so after that im igone it for continue to making the webs app.....

and after im done, and free im thinking updating my laravel 11 to 12... and after that, why dont 1 try updating the tailwind from 4.0 to 4.1.*
its success and when im try opening the modal and trying using safelist on controller just change to sm to 2xl, aaaaaaaaaaaaaaand IT's WORRRKKK...WHY???? may be the creator(you, sir, thank you) change some the code.... but now after that........... when i see the modal, ...Eh...? why the modal became transparant ??

here the image

and im trying edit the css on resource/view/vendor/wire-element-modal/modal.blade.php

trying editing some css from bg- to z- but its not work, but after that im found this
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>

if im using that , the modal like the first image, but if im change it to opacity-0 (only this work), the modal bg-white but the backgound is normal (bg-gray-500 not working)

and here the full code, before im using this sm:max-w-md md:max-w-lg lg:max-w-2xl but because the safelist working so im deleting it.

laravel/framework: ^12.0, tailwindcss: ^4.1.5, livewire/livewire: ^3.0, wire-elements/modal: 3.0.0-beta

`

<div            
       x-data="LivewireUIModal()"
        x-on:close.stop="setShowPropertyTo(false)"
        x-on:keydown.escape.window="closeModalOnEscape()"
        x-show="show"
        class="fixed inset-0 z-10 overflow-y-auto"
        style="display: none;"    >
    <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
        <div
                x-show="show"
                x-on:click="closeModalOnClickAway()"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 transition-all transform"
        >
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div
                x-show="show && 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"
                id="modal-container"
                x-trap.noscroll.inert="show && showActiveComponent"
                aria-modal="true"
        >
            @forelse($components as $id => $component)
                <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                    @livewire($component['name'], $component['arguments'], key($id))
                </div>
            @empty
            @endforelse
        </div>
    </div>
</div>

`

thank you

[AlnThea]

just ad relative to this code
from
class="inline-block w-full align-bottom
to
class="relative inline-block w-full align-bottom

[CallumBee]

Thank you! This was driving me crazy!