Allow customisation of the Flowbite Plugin via the tailwind.config.js file

[micahjonas]

Is your feature request related to a problem? Please describe.

Currently the button in the file upload component is styled by using styles directly added by the flowbite plugin. There is only the dark version of the upload component supported. Tailwind offers the file: modifier to adapt the button. Sadly those can't be used when the flowbite-plugin is included in the tailwind config. The css selectors of the flowbite plugin have a higher specificity then anything that can be added by using tailwind classes.

Describe the solution you'd like

It would be great if there was a way to remove the styles of the input[type=file] selector form the flowbite-plugin and instead style the buttons directly with tailwind. In the end I would love to have a way to support other color variants of the file input button. If there is a good way of implementing this I'm happy to look into it and create a pull request myself.

[zoltanszogyenyi]

Hey @micahjonas,

Thanks for opening up this issue - it's something my mind has been on for some time.

We want to improve the Flowbite Plugin <-> Tailwind Config customisation options but haven't really had the time to go into it too much - basically our idea would be to be able to first update the color that is being applied to pseudo elements (ie. file input, tooltips) via the tailwind.config.js file.

You are more than welcome to open a PR regarding this and we can even collaborate on this one since I've been wanting to work on this for some time - I'm currently focused on another set of issues for v1.6.4 but if you come up with something tangible we might even merge it in the next release. If not, we can continue working on it until we can release it.

You can also ping me on Discord (zoltanszogyenyi) and talk there since it may be faster to communicate.

Flowbite Discord Server: https://discord.gg/4eeurUVvTy

Cheers, Zoltan

[micahjonas]

Hi @zoltanszogyenyi

Any pointer to what you are thinking of when you would like to use values from the tailwind.config file? Are thinking of custom colors, something flowbite specific or more in the direction of primary colors? Or are there any other way of doing that? Examples or any kind of documentation would be helpful to guide my way.

Thanks for the quick response I will try to make up a little time to visit the discord in the next days 😄

[zoltanszogyenyi]

Hey @micahjonas,

Yeah, I think the first thing we need to tackle is the colors that are hardcoded in the plugin.js file from the Flowbite package - it should be obvious that the blue color should be customizable as applications have their own primary colors.

To be honest I haven't touched the plugin.js for a while but I know we have some hardcoded blue colors which are supposed to be the primary color of the application and some other gray hardcoded colors for things like the file input which should probably also be customizable.

Additionally, tooltips and popovers (arrows too) are hardcoded in terms of colors - granted they are neutral being gray but still, maybe an application needs a red tooltip or whatever.

Yeah let's also chat on Discord it's easier there - for more official stuff we can keep the thread open here on GH.

Cheers, Zoltan

[agrberg]

Glad I found this thread before opening a new one. My team is experiencing this same issue as well. FWIW it was tough to debug as unlike in the Firefox screenshot below, Chrome doesn't even show these styles as being applied in the inspector!

My naive work around is to delete L162-L192 from plugin.js but strangely these styles persist locally. I've done a hard refresh (⌘+R) and ensured all assets get rebuilt (rails assets:clobber on Rails).

Any insight into what else I can try while this issue waits for its prioritization?

[mefaba]

Baseline is I should be able to customize my input with tailwind. Flowbite should not override my inline class styles. This is so annoying. I think we should remove this behaviour entirely from plugin.js and provide the styles for the input on website of flowbite.