So, you got a great plugin idea for Filament. You set up Tailwind CSS in your plugin so you can use those sweet utility classes in your views and integrate seamlessly with Filament. But, what you may not realize is that when you build your assets they are only utilizing Tailwind CSS's JIT against your plugin and not all of Filament. Maybe this isn't the end of the world to you, but have you considered what this means to users of your plugin?

#A bit on unintended bloat

Consider this, you have a view using p-4 in your plugin. Great, your view now has a p-4 class in its style sheet that you have appropriately loaded in your plugin's service provider and everything is working as expecting, but there's a catch. Filament's style sheet also has a p-4 class. Now there's 2 p-4 classes getting loaded by the browser and only one is necessary to work correctly. Not too much of a big deal, maybe. It's just a class or two that are effectively overwriting each other depending on the cascade, but the outcome is still the same, right?

Now imagine that a user has 10 plugins installed and they are all using p-4 in their styles sheets or views. Wait, so now it's not a class or two, it's suddenly 20+ duplicate classes all trying to compete and do the exact same thing as each other. It's completely unnecessary and basically defeats the point of using utility classes to start with.

So, what do we as responsible Filament plugin developers do?

#We put a purge in your purge

Believe it or not, there is a solution. We can purge the purge. Sound's weird, right? But it is possible to compile our plugin style sheets against Filament's own style sheet to remove unnecessary / duplicated classes in our plugins. This can be accomplished by adding one additional step to our plugin's build scripts that compares our plugin's distributed CSS against Filament's distributed CSS and outputs an optimized version of our plugin CSS that purges it of duplicates already included by Filament.

I'll happy discuss the ins and outs of my fun journey with AST's and diffing CSS files if you're interested, but to make things simple for you there's an npm package called Filament Plugin Purge developed specifically for this purpose. Just include it in your build process as the last step to make your users happy.

#Better Yet

For those looking to start their journey into Filament Plugins, or even for experienced plugin developers we have a template that you can use on GitHub at https://github.com/filamentphp/plugin-skeleton to stream line the process of creating plugins for Filament that has everything you need to get started.