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.) only render properly if I include @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?

11 Replies

bwurtz999OP•13mo ago

I created the custom entry as described in the docs php artisan make:infolist-entry Also, I don't think the ->extraAttributes() is working either. I'm not sure if that's related but I would guess that it is

awcodes•13mo ago

If you are using panels and custom components then you will have to use a custom theme. Basically, any tailwind classes that aren’t in filament require a custom theme. That’s just how tailwind works.

bwurtz999OP•13mo ago

@awcodes Thank you! I forgot about that So does adding @vite('resources/css/app.css') to my custom theme.css work? It seems to solve my immediate problem, but I'm wondering if it creates others

awcodes•13mo ago

No. That’s not a custom theme.

awcodes•13mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

bwurtz999OP•13mo ago

So I have to manually add all the classes I want to use for my custom Infolist entry component to theme.css?

awcodes•13mo ago

No. You setup a custom theme and add your app’s view routes to the theme’s tailwind config. Then when you build the classes will be part of the theme.css. Looking at the code you provided though, what is custom?

bwurtz999OP•13mo ago

That's just it - I'm not using anything crazy I can't get grid or any col-span-x to work

awcodes•13mo ago

It seems like you are loading a stylesheet in addition to filament’s default css. If that’s the case it isn’t going to work because css assets get loaded before filament’s stylesheet so you’re liking running into a specificity issue. That’s why you need a custom theme. It replaces the default filament stylesheet completely.

bwurtz999OP•13mo ago

OK. I removed the custom theme from my vite inputs because I don't actually need custom classes, I was just hoping it would help But grid grid-cols-6 still isn't rendering

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/Pages/Sale.vue",
        "resources/inertia/app.js",
        // "resources/css/filament/admin/theme.css",
      ],

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/Pages/Sale.vue",
        "resources/inertia/app.js",
        // "resources/css/filament/admin/theme.css",
      ],

I figured it out! I misunderstood your comment earlier about the tailwind config. I forgot that the custom theme has it's own config file I added the proper folder to the content for the custom theme tailwind config and now it's working perfectly Thank you for the help!

awcodes•13mo ago

I tried. It’s hard to explain. Glad you figured it out though.

Gaming

Programming

Custom Infolist Entry CSS