Filament•14mo ago

Custom theme missing some default classes

Brand new installation (but this happened on previous setups too), I just made a custom theme and as soon as I switch to it, the various items' gray borders disappear, be it the small search input above the tables or the whole container that holds the table itself I've narrowed it down to not having these 2 declarations in my CSS:

.ring-1,.ring-2 {
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
}

.ring-1,.ring-2 {
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
}

.shadow-sm,.shadow-xl {
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.shadow-sm,.shadow-xl {
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

My tailwind config is the default one, adapted just the paths to my custom panel (shop), but these classes should be in the default filament blades, not custom ones

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/Shop/**/*.php',
        './resources/views/filament/shop/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/Shop/**/*.php',
        './resources/views/filament/shop/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

12 Replies

MdkOP•14mo ago

Actually, I tried adding those 2 classes' properties to the item itself and that wasn't enough to bring back the border, so there's something else I'm missing, but those 2 are for sure not in my .css file

awcodes•14mo ago

hmm. fresh install, no issues here.

MdkOP•14mo ago

ok, i just re-enabled my theme and now.. it just works, I swear this is driving me insane cause I had the same bug on older installations too (always V3 tho) back to the start, i added a custom page with some tailwind classes, launched npm run build and i'm back to borderless stuff my tailwind config seems to be doing fine?

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

MdkOP•14mo ago

this is what the element inspector looks like with my theme

MdkOP•14mo ago

and this is with the original theme

MdkOP•14mo ago

.ring-1, .ring-2 is missing, as well as .shadow-sm, .shadow-xl

toeknee•14mo ago

Try adding them to your safelist

MdkOP•14mo ago

ok, seems like that fixed it, SO FAR wonder why it's not picking up on them on its own thanks and it's borderless again

awcodes•14mo ago

here's a crazy idea, what version of node are you running? and are you using sail?

MdkOP•14mo ago

no sail, it's my own VPS node v20.5.1 npm 9.8.0 when it goes borderless, for some reason, removing my theme from the panelprovider, refreshing (not compiling) and then readding SEEMS to fix it? which makes even less sense

awcodes•14mo ago

Can you try it with node 18, that’s the latest LTS. I’m wondering if it’s a bug in node latest.

MdkOP•14mo ago

i'll give it a try

Gaming

Programming

Custom theme missing some default classes