Tailwind classes getting ignored in plugin view?
I am working on a plugin that shows some information in a grid, but no matter what I do, my Tailwind CSS classes are ignored.
<div
x-show="open"
x-on:click.outside="open = !open"
class="grid grid-cols-3"
>
@foreach ( $getItems() as $item )
<div
class="m-1">
{{ $item }}
</div>
@endforeach
</div>
I can use "grid-cols-7". I've added the file directly to the "content" array of the tailwind conf, still nothing.
Is there a way to use my own grid inside of my custom plugin? Ideally it would have been dynamic but I don't think that's possible.
Solution:Jump to solution
If you develop a plugin: You can either compile a CSS file with the missing classes from standard Filament theme and truncate the rest. See the plugin-skeleton from awcodes. Or you instruct the user to create a custom theme and add your plugins vendor to the config.
8 Replies
Did you create a custom theme or which tailwind.config are you using?
No custom theme, it's just for a plugin where the modal shows a grid of 12 items.
So what tailwind config are you editing? How do you expect your config to magically appear in the resulting CSS file?
You need to create a custom theme if you need custom classes.
I see
Solution
If you develop a plugin: You can either compile a CSS file with the missing classes from standard Filament theme and truncate the rest. See the plugin-skeleton from awcodes. Or you instruct the user to create a custom theme and add your plugins vendor to the config.
So, there's like no plugin that wants to use it's own grid-cols size for some modal? If there was, you'd only be able to use it if you have a custom theme?
Ah
Yeah okay, thanks.
I guess my last message answered this, right?
Yeah it did, I didn't see it before sending! That's what I was struggling with, I think.