The component is not styled.

[ilixindri]

In the child component action I put flash('Your request was successful!')->success()->livewire($this); and in the parent component I put <livewire:flash-container />.

The message is displayed without any alignment.

Code generated in the browser by the <livewire:flash-container /> component

<section wire:id="2TUwewW4cwGXsLh7VCG7">
        <div wire:id="XRtWV3FmnkEyRH1lQODa">
        <div class="rounded-r-md bg-green-100 p-4 border-l-4 border-green-400 mb-3">
             <div class="flex">
                <div class="flex-shrink-0">
                    <p class="text-green-400">
                        <i class="fas fa-check"></i>
                    </p>
                </div>
                        <div class="ml-3 text-sm leading-5 font-medium text-green-800">
                Your request was successful!
            </div>
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button type="button" class="inline-flex rounded-md p-1.5 text-green-800 focus:outline-none transition ease-in-out duration-150" wire:click="dismiss">
                    <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
         </div>
    </div>
    </div>
<!-- Livewire Component wire-end:XRtWV3FmnkEyRH1lQODa -->
</section>

What i tried

With the <div class="ml-3 text-sm leading-5 font-medium text-green-800">Your request was successful!</div> element selected I searched for the text-green-800 class in Google Chrome's Styles tab, but no element was shown. Different for example from the ml-3 class that appears.

Also tried the command php artisan vendor:publish --provider="MattLibera\LivewireFlash\LivewireFlashServiceProvider" and it didn't solve the problem.

I followed this tutorial https://stackoverflow.com/a/66828581 to install Tailwind and Font Awesome. The problem has not been resolved.

[mattlibera]

Hi @alexandrogonsan , thanks for using the package!

This, to me, looks like it's outputting exactly what's expected, and that there might be a problem with the Tailwind installation or other rendering of styles. The HTML you posted has the Tailwind classes in it, and looks correct to me.

The only other thought I have... when you are compiling your Tailwind installation, it will strip out styles that are not used. Have you added the paths for these flash message views to the tailwind.config.js file? See here: https://tailwindcss.com/docs/content-configuration#configuring-source-paths

See if that helps, because if you're seeing ml-3 styles applied in the inspector, but not the others, this would make sense.