Font styling configurations

[jamesrweb]

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

I've been working with the flowbite-react library and have encountered an issue where the default classes applied to elements overwrite most of the global font sizes. As a result, I find it time-consuming to adjust almost every element manually or even via the theme configuration option since case to case the requirement can be difference and controlling that via the theme configuration is not simple at scale.

Describe the solution you'd like

I would like to request the ability to disable the default classes applied to elements in the flowbite-react library, which would prevent them from overwriting global font sizes, styles, and weights. Instead, it would be wonderful to use custom classes and globals, ideally with an option to turn off the default classes for fonts entirely.

Describe alternatives you've considered

I've considered manually overriding the default classes and configuration for each element, but this would is becoming largely impractical for larger projects like ours.

Additional context

Thank you for your time and attention to this matter. If you require any further information or clarification, please let me know.

[tulup-conner]

Have you seen https://flowbite-react.com/theme?

Flowbite is a design system and the react library just takes cues from that. The design system is opinionated. You can customize it to an extent with the theme, and what you're describing seems totally feasible to accomplish here.

With that said, what we do not have is the ability to apply generic changes to multiple components simultaneously. For example, there are definitely components that share common Tailwind CSS classes (sometimes a LOT of them) but you'll have to repeat your changes for the theme of each component you use. I am aware that makes institutional changes to components more challenging, but I have no idea how to make that easier TBH. Most likely, that solution would lie in moving some of the theme customization up to tailwind.config.js. Unfortunately, that isn't necessarily simple.

[jamesrweb]

Yes, I use the theme extensively but it's annoying to have to change every component manually just to set a font and associated styles which is already the global default.

Same scenario with focus, focus within and active styles as other examples where extensive rewrites of classes in the theme are required just to get the global setup to be respected.

[tulup-conner]

Also, I'm going to move this to a discussion because I think it would be nice to get feedback from people on how they are using the library and what they feel would be ergonomically the easiest way for them to make changes at a large scale.

[jamesrweb]

No problem 👌🏻

[trollbot38]

Second this. Flowbite is amazing as a kickstarter, but once down to the weeds on customizing for your own app, it's difficult to customize colors and fonts. Colors I kind of gave up and just updated tailwind's global default. But font size is where I'd like to not touch at all.

Been keeping track and understand there's themes, but they're too specific. I'm assuming for 90% of Flowbite's consumers, they're most likely just trying to do something simple, like changing out all of the default blue color, updating all font size, or some default value.

[tulup-conner]

This is a valid criticism that I agree with. I think a nice solution to this would be to add support for interpreting tailwind.config.js. I don't really see a way around it at this point, and flowbite's vanilla library operates naturally as a Tailwind CSS plugin anyway.