Filament•6mo ago

make use of tailwind layers in custom theme

following the docs, i created a custom theme. now i want to apply some base styles to my panel. usually i would wrap them inside tailwinds base layer.

@layer base {
  @apply bg-red-500;
}

@layer base {
  @apply bg-red-500;
}

if i paste that snippet inside theme.css i get the following error

`@layer base` is used but no matching `@tailwind base` directive is present.

`@layer base` is used but no matching `@tailwind base` directive is present.

i'm not sure if that is a bug or if i'm applying the styles in the wrong place. the other option would be to add the classes directly in the markup. is there any way to hook into/apply styles to <html> and <body> within the panel builder?

2 Replies

DrByte•6mo ago

within the panel builder?

I'm not sure whether ->extraAttributes() works on Panels. As a last-resort registerRenderHook() on panels::styles.after would let you forcefully inject styles ... but I wouldn't recommend it: it's more for adding external things that aren't in your control (like 3rd party) or not part of your build process. Better to get your custom theme working as intended within tailwind. Unfortunately I can't help much with the tailwind part.

maltebaer•6mo ago

thanks a lot for the help. ->extraAttributes() does not exist on the panel provider. i guess it would not be clear which element to apply to. i agree that using the render hooks is to hacky to apply my own custom styles. adding the styles directly to theme.css works just fine. i only have to be more careful with the specificity if i'm not able to make use of tailwinds layers.

Gaming

Programming

make use of tailwind layers in custom theme