Custom Infolist Entry CSS

Has anyone else had an issue getting custom CSS classes to render properly? I have the following code:

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry" :prefix="null">
    <div class="w-full border-b-1 border-black grid grid-cols-6">

        <div class="col-span-2">
            {{ $getName() }}
        </div>

        <div class="col-span-4 text-right">
            {{ $getState() }}
        </div>

    </div>
</x-dynamic-component>

@vite('resources/css/app.css')

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry" :prefix="null">
    <div class="w-full border-b-1 border-black grid grid-cols-6">

        <div class="col-span-2">
            {{ $getName() }}
        </div>

        <div class="col-span-4 text-right">
            {{ $getState() }}
        </div>

    </div>
</x-dynamic-component>

@vite('resources/css/app.css')

The custom CSS (

grid, grid-cols, etc.)

grid, grid-cols, etc.)

only render properly if I include

@vite

@vite

in the component. But the issue is that I've tried this before and I know it only works locally. It won't work in production. I feel like I'm missing something simple. Any ideas?

Filament•3y ago•

23 replies

bwurtz999

Custom Infolist Entry CSS

Has anyone else had an issue getting custom CSS classes to render properly? I have the following code:

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry" :prefix="null">
    <div class="w-full border-b-1 border-black grid grid-cols-6">

        <div class="col-span-2">
            {{ $getName() }}
        </div>

        <div class="col-span-4 text-right">
            {{ $getState() }}
        </div>

    </div>
</x-dynamic-component>

@vite('resources/css/app.css')

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry" :prefix="null">
    <div class="w-full border-b-1 border-black grid grid-cols-6">

        <div class="col-span-2">
            {{ $getName() }}
        </div>

        <div class="col-span-4 text-right">
            {{ $getState() }}
        </div>

    </div>
</x-dynamic-component>

@vite('resources/css/app.css')

The custom CSS (

grid, grid-cols, etc.)

grid, grid-cols, etc.)

only render properly if I include

@vite

@vite

in the component. But the issue is that I've tried this before and I know it only works locally. It won't work in production. I feel like I'm missing something simple. Any ideas?

Custom Infolist Entry CSS

Similar Threads

Custom Infolist Entry CSS

Similar Threads

Similar Threads

Similar Threads