Make CSS classes configurable (for use with Tailwind or Bootstrap)

[jmartsch]

The problem
I want to use klaro in conjunction with Tailwind CSS which has become very popular nowadays. So I want to use klaro-no-css.js and then use the classes that Tailwind provides.

I could generate an own stylesheet and map the different klaro classes to Tailwind classes with @apply. But this generates an extra CSS file as overhead, as I am duplicating everything, instead of just using the already loaded Tailwind (or Bootstrap) classes for the different elements like buttons.

Proposed solution

To get this to work many elements in the different components have to get an additonal class based on the config, while maintaining the standard klaro CSS classes (if they are needed for some triggers).

For example https://github.com/kiprotect/klaro/blob/240345706fbcb4dafa6ef4bd284e0c3bc4d63240/src/components/consent-notice.jsx#L143

would become

screenshot because github destroys my js template literal

className={`cm-btn cm-btn-success ${config.acceptButtonClasses}`}

where config.acceptButtonClasses is defined in my config file. Then I could use "acceptButtonClasses: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded', and style the different elements and components however I want with the classes a CSS framework provides.

What you think about this aproach? I am planning to do it.

But to do it, I must first know how to generate the klaro-no-css.js file see my issue: #355

[adewes]

Hey @jmartsch, sorry I didn't reply earlier, did this strategy work for you? I'm not sure we'd want to do that as this would make our code a lot more complex, I'll think about a way to achieve better styling though.

[jmartsch]

Yes sure this works for me. But I just tested it for one button. I don't think that the code would be much more complex, as you just have to ad a variable to the classes and the config. Sure, you have to insert them everywhere and document them, but I think it is doable.
It would be nice if we had an option to use existing classes of frameworks.