search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.41k stars 1.27k forks source link

Looking for a way to add a prefix (or suffix) to all daisyUI component classes #452

Closed armenr closed 2 years ago

armenr commented 2 years ago

Hi there! I love your component library. I'm a HUGE fan.

In our project, we're using vite + vue3 + windiCSS, and I'm wondering if there's a way to be able to pass a custom prefix on all classes/styles that daisyUI loads into project and runtime.

Would you happen to know if there's any such way to do this? The reason I ask is because we'd like for DaisyUI to coexist in our application codebase alongside some other libraries (including, for example, tailwind-UI and/or Quasar).

Thank you for any help or advice (even if it's just to say no), and thanks for all of your hard work on this beautiful library!

saadeghi commented 2 years ago

You can use Tailwind's prefix option
And if yo want the prefix only for daisyUI classes (not all Tailwind classes), I recommend having 2 Tailwind builds. One with prefix and daisyui as a plugin. the other one just for Tailwind utilities. This way, only daisyUI classes will have prefix (.card => .daisy-card), all tailwind classes will stay the same and you can have your custom .card, etc... styles.

Example repo here: https://github.com/saadeghi/daisyui-prefix-example

please let me know if you have any questions.

armenr commented 2 years ago

@saadeghi - kheyli maamnoon baraadar! I appreciate the insight and the example repo :)

Keep up the incredible work. I gotta my BTC wallet set up so I can become a supporter 😎

saadeghi commented 2 years ago

New prefix config added to daisyUI 2.4.0
https://daisyui.com/docs/config/