Tailwind not working in custom entry

I made a new custom entry with cli but when i use tailwind classes they don't work.

Solution:

Then you need a theme. Your app.css does not apply to Filament

13 Replies

app.css is in resources/css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../app/Filament/Infolists/**/*.blade.php';

@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../app/Filament/Infolists/**/*.blade.php';

@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

and custom entry is in app/Filament/Infolists/Components

<?php

namespace App\Filament\Infolists\Components;

use Filament\Infolists\Components\Entry;

class ServiceItemEntry extends Entry
{
    protected string $view = 'filament.infolists.components.service-item-entry';
}

<?php

namespace App\Filament\Infolists\Components;

use Filament\Infolists\Components\Entry;

class ServiceItemEntry extends Entry
{
    protected string $view = 'filament.infolists.components.service-item-entry';
}

Dennis Koch•7d ago

I think @import should be at the top. You added this as a theme and recompiled it?

realswagoverlord-revivedOP•7d ago

no, just app.css

Dennis Koch•7d ago

Are you using Filament as a Panel with Resources etc. or are you using just single components?

realswagoverlord-revivedOP•7d ago

as a panel with resources

Solution

Dennis Koch•7d ago

Then you need a theme. Your app.css does not apply to Filament

realswagoverlord-revivedOP•7d ago

i followed this guide to make the custom entry https://filamentphp.com/docs/4.x/infolists/custom-entries

Custom entries - Infolists - Filament

Dennis Koch•7d ago

Yeah, that's not the issue. Why the sad emoji? It's a matter of minutes. It's just a separate CSS file for Filament

realswagoverlord-revivedOP•7d ago

I will have to stick with the style method even though its bad practise, i got a deadline for this project so no time to make a whole theme just for a small section. Anyways thanks for the help 🙂

Dennis Koch•7d ago

Did you read my message? It takes less than 5 minutes. A "Theme" is just a CSS file, so you can add your own definitions and Tailwind Classes

realswagoverlord-revivedOP•7d ago

i read it 🙂 i just heard too many times about different things that should take "5 minutes" or less but end up taking hours 😄 its no biggy, i just wanted to add badge styles of some lines of text so it was already done quick and easy

Dennis Koch•7d ago

Give it 5 minutes 😉 It's literally one command to create it and 2 files to add to your panel and vite.config

Dennis Koch•7d ago

Here are the docs: https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme

Overview - Customizing styling - Filament

Gaming

Programming

Tailwind not working in custom entry

Did you find this page helpful?