Tailwind prefix not considered

[clari182]

Is your feature request related to a problem? Please describe.
I'm using tailwind configured with a prefix tw- but when using a flowbite-react component (for example Card) the prefix is not added to the card classes. So the tailwind styles are not applied.

Describe the solution you'd like
It'd be great if the tailwind prefix defined in tailwind.config.js is applied to the component classes.

[rluders]

Yeah... TBH, I have NO idea how it can be done. 🤔
But, you can easy fix it right now, just prefixing the the css tags by creating a custom theme.

[rluders]

How to use theme component:
https://flowbite-react.com/theme

Default theme file:
https://github.com/themesberg/flowbite-react/blob/main/src/lib/theme/default.ts

[clari182]

Hey! Thanks, that's actually the workaround I'm using right now.

[rluders]

I have an idea here. Since we are using the theme system, we could try to get the prefix from tailwind.config.js and kind of "prefix" all the styles defined in the theme. Not sure how it will impact the performance, and how we can "build a static theme" from this... but maybe worth giving it a try and creating a PoC.

[tulup-conner]

@rluders Yeah, I think we can look into leveraging https://tailwindcss.com/docs/configuration#referencing-in-java-script

[rluders]

We probably will not work on this one. The best approach is to change the theme.

[nathguen]

Perhaps I'm missing something here, but if I'm understanding this correctly, the suggestion is to update the theme to leverage the prefixes by adding an overriding entry for each component?

I don't see how that workaround is a workable solution.

If I'm changing the theme to apply prefixes to every component's properties, what's the purpose of integrating with the flowbite-react library?

[rluders]

@nathguen since the classnames are basically strings, I don't see how we can automatically prefix them with the prefix configured in the tailwindcss configuration. But, anyway, if you have a better solution or suggestion, I'm open to hearing it.

[nathguen]

Just spitballing here.

I don't know the build processes for tailwind or postcss very well, but if there's a dictionary of all available class names, the build process could prefix any class name that matches inside a className property right?

How does TailwindCSS prefixes work currently?

[fgarcia]

Sadly I am not sure how they do it, but since it is not mentioned here, it might be worth knowing that DaisyUI does exactly this. They even support the concept of 2 prefix types, both optional: One for the prefix of Tailwind classes, and another for the library ones.

Recently I had to gradually mix Tailwind into a project already using Bootstrap. Both define padding utilities with different sizes but the same name. With Daisy UI even the button class btn overlapped with Bootstrap too without a prefix.

[rluders]

I was checking how DasyUI applies the prefix, and it seems that it is done at the PostCSS processing, it can be seen here.

I'll reopen this one, so, if @nathguen, @fgarcia, or anyone else were interested to submit a PR to implement this I'll be happy to review and accept it.

To me, it is not a huge priority, TBH... but probably something nice to have...