Filament•5mo ago•

8 replies

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

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>

<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

vite build

multiple times now, checked my app.css (it does

@import 'tailwindcss';

@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(),
    ],
});

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: flex

display: flex

is not applied to the row. I only get the

display: block

display: block

from 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...

/*! 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?

Solution

did you run the npx upgrade? You are right looking at V4, but you need to include your blades in the v4 classes see:
https://filamentphp.com/docs/4.x/styling/overview#using-tailwind-css-classes-in-your-blade-views-or-php-files

So you should have a path to your custom view folder.

Overview - Customizing styling - Filament

Jump to solution

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

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>

<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

vite build

multiple times now, checked my app.css (it does

@import 'tailwindcss';

@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(),
    ],
});

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: flex

display: flex

is not applied to the row. I only get the

display: block

display: block

from 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...

/*! 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?

Solution

Overview - Customizing styling - Filament

Jump to solution

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

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

Similar Threads

Similar Threads

Similar Threads