F
Filament•2w ago
Husky110

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 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(),
    ],
});
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...
/*! 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? 🙂
No description
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
6 Replies
toeknee
toeknee•2w ago
and what about your tailwind config which tells it where to look for it's classes?
Husky110
Husky110OP•2w ago
according to this, that ain't needed anymore. Or did I get this wrong?
No description
Husky110
Husky110OP•2w ago
Solution
toeknee
toeknee•2w ago
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
Husky110
Husky110OP•2w ago
That was it! Thank you @toeknee! 🙂 For anyone seeing this: You can add more view-directories by using @source ../../../resources/views/add_your_subfolder/**/*
toeknee
toeknee•2w ago
No problem, very welcome!

Did you find this page helpful?