F
Filament•4w ago
影の人

style isn't applied in blade

i have a simple ViewField usage in my form 
php 
ViewField::make('transcript_path')
                            ->label('Transcript')
                            ->view('filament.resources.scholarship-application-resource.document-link'),
php 
ViewField::make('transcript_path')
                            ->label('Transcript')
                            ->view('filament.resources.scholarship-application-resource.document-link'),
blade: 
php 

@if($getState())
<a href="{{ Storage::url($getState()) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-700 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-300 disabled:opacity-25 transition">
    View Document
</a>
@else
<span class="text-gray-500 italic">No document uploaded</span>
@endif
php 

@if($getState())
<a href="{{ Storage::url($getState()) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-700 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-300 disabled:opacity-25 transition">
    View Document
</a>
@else
<span class="text-gray-500 italic">No document uploaded</span>
@endif
as shown in the image attached no style is applied i tried to restart the dev server , clear cache...etc still same laravel 12 + flphp v4 + tailwindcss v4
No description
11 Replies
toeknee
toeknee•4w ago
You are likely using custom classes, make sur eyou are using a custom filament theme so we build those classes in.
影の人
影の人OP•4w ago
none is custom , it's literally just plain tailwindcss 
class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-700 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-300 disabled:opacity-25 transition"
class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-700 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue-300 disabled:opacity-25 transition"
Zen Nitiruj
Zen Nitiruj•4w ago
ensure that your have include this in your resources/css/app.css file @source '../views'; then run npm run build and add app.css and add it to your AppServiceProvider 
FilamentView::registerRenderHook(
           PanelsRenderHook::STYLES_BEFORE,
            fn(): string => Blade::render('@vite([\'resources/css/app.css\'])'),
        );
FilamentView::registerRenderHook(
           PanelsRenderHook::STYLES_BEFORE,
            fn(): string => Blade::render('@vite([\'resources/css/app.css\'])'),
        );
影の人
影の人OP•4w ago
has
toeknee
toeknee•4w ago
it's plain tailwind, but if we are not using the classses then they will not be compiled. that's why custom themes are needed, so they are building the assets.
影の人
影の人OP•4w ago
i see
toeknee
toeknee•4w ago
Filament is performant, we don't load ALL the tailwind styles. We compiled what is needed.
影の人
影の人OP•4w ago
@toeknee @Zen Dev it seems just using button blade component is better approach than doing a whole theme just for a button
影の人
影の人OP•4w ago
toeknee
toeknee•4w ago
yes it geneally is for consitency
影の人
影の人OP•4w ago
this is much better changed to solved

Did you find this page helpful?