[Filament 4.x] Replace custom styling with tailwind

[CodeWithDennis]

Currently, the plugin relies heavily on custom CSS or classes for its styling. It would be more effective to adopt FilamentPHP /Tailwind styling (classes), similar to that of the Select component. For instance, when a different template is applied, the plugin’s appearance becomes inconsistent, which is already noticeable on the default theme.

I am looking for someone who can offer help with this refactor.

[CodeWithDennis]

Here is an example showing a regular select component compared to the tree select, using the minimal theme.

[gp-lnuff]

Do we have an idea of what the approach would be? Injecting the filament css classes on top of the selectTree classes with @apply? From my understanding the Alpine component comes from the js package and I couldn't really find anywhere to go and change which classes appear on the component, just the styling in the .css files.

[CodeWithDennis]

Another comparison between a normal select and the current select tree styling. The first one shows the select tree, but it doesn’t match the original.

[CodeWithDennis]

Do we have an idea of what the approach would be? Injecting the filament css classes on top of the selectTree classes with @apply? From my understanding the Alpine component comes from the js package and I couldn't really find anywhere to go and change which classes appear on the component, just the styling in the .css files.

I’m not sure what the best approach is, which is why I was hoping to get help from the community with more experience in styling this kind of thing.

[CodeWithDennis]

Maybe @MarcelWeidum can take a look he’s better at CSS styling than me 👀.