creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.51k stars 307 forks source link

Allow for custom tailwind className prefix #511

Open irg1008 opened 7 months ago

irg1008 commented 7 months ago

I was wondering if we could add support for custom tailwind classname prefix. I would help a lot when using this library in an scenario where bootstrap or other conflicting frameworks may be used

Thanks

hjrdave commented 5 months ago

This is a feature I really wanted to. It seems that this is an underlying issue with tailwindcss. As dynamic classNames are not possible. Prefixing the classes would have to be passed through a component prop and thus causing all classes to be dynamic and causing issues with the tailwind compiler. Here is a stack for this. Not sure if the maintainers have another idea for this. I was using this for a react component library, but I will need to switch to just pure tailwind unfortunately because the lack of prefixing is a non starter.

ntkoopman commented 6 days ago

You could implement this with an extra build step in this repository:

You would need to add the prefix both at runtime in every component (before merging), and in the tailwind config before setting the safelist option.

This would also make it unnecessary to ever include the library location in the tailwind content option.