#Can't use Tailwind-classes anymore after update to Filament V4

8 messages · Page 1 of 1 (latest)

patent storm
#

Hey - after following the upgrade-guide from Filament 3 to Filament 4 it does not seem to recognize tailwind-classes anymore.
I'm using a view for my resource-column-label which does this:

<div class="flex items-center" @if($tooltipText)x-data x-tooltip.raw="{{ $tooltipText }}"@endif>
    @if($searchable)
        <x-tabler-input-search />
    @endif
    @if($searchable && $filterable)
        <span class="mx-0.5">+</span>
    @endif
    @if($filterable)
        <x-tabler-filter-search />
    @endif
    <span class="ml-1">{{ $text }}</span>
</div>

I've ran vite build multiple times now, checked my app.css (it does @import 'tailwindcss'; and checked my vite.config.js which looks like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
});

But whatever I try - the display: flexis not applied to the row. I only get the display: blockfrom the attached screen shoot. When I load my app.css within the browser, it starts with ```/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties{@supports...

So tailwind seems to be there but not applied. I am out of my knowledge right now - anyone had this before and is able to help? 🙂
fast cipherBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

pseudo galleon
#

and what about your tailwind config which tells it where to look for it's classes?

patent storm
pseudo galleon
patent storm