Filament•2y ago

Using tailwindcss bg-* in modal content view

I am trying to make badge for a tag using rounded-full and bg-success / bg-green-500 inside a modal content. But nothing changed, is there something I missed or should configure? Here is the code

  <div class="flex flex-col md:flex-row md:justify-between items-center">
        <div>
            <span class="text-xs">ID</span>
            <br />
            <span class="text-s font-semibold select-all">
                {{ $order->id }}
            </span>
        </div>
        <span class="text-lg font-semibold bg-success rounded-full" @class([
            'bg-success' => $order->status == 1,
            'bg-danger' => $order->status == 2,
            'bg-warning' => $order->status == 3,
        ])>
            {{ $order->status_text  }}
        </span>
    </div>

  <div class="flex flex-col md:flex-row md:justify-between items-center">
        <div>
            <span class="text-xs">ID</span>
            <br />
            <span class="text-s font-semibold select-all">
                {{ $order->id }}
            </span>
        </div>
        <span class="text-lg font-semibold bg-success rounded-full" @class([
            'bg-success' => $order->status == 1,
            'bg-danger' => $order->status == 2,
            'bg-warning' => $order->status == 3,
        ])>
            {{ $order->status_text  }}
        </span>
    </div>

5 Replies

fikurimaxOP•2y ago

I've already done the Building Themes section in the docs

Appearance - Admin Panel - Filament

Vp•2y ago

Did you build assets using npm run build? if yes, then remove from public folder and after change done build again

fikurimaxOP•2y ago

I didnt, i only run npm run dev

Vp•2y ago

instead of bg-success try bg-success-500 and also try in the first <div> and check, problem can be base on the $order->status

fikurimaxOP•2y ago

still doesnt work

Gaming

Programming

Using tailwindcss bg-* in modal content view