Class overrides supported by default

So, we are converting sections of our markup to use function components in core_components.ex. We use tailwindcss.

We’d like to be able to style a button, for instance, as a function component (by simply modifying what is in CoreComponents.button/1). However we’ve run into the question of how to apply default styles to the button that can be easily overridden. Setting the default on the attr: :class attribute works, but only if you set no other values. Changing some of the provided classes, like bg-zinc-900, works as long as we do not set other bg- values on class when calling the <.button class="bg-red-500".... Doing so may appear to work, but the classes are used if they are the latest in the css file, not in the list of values in class="...".

Is there already a good way to do an override? A colleague found Twix library.

Can this our should this be included in Phoenix.Component? Or is it tied too closely to tailwindcss?

We’d be happy to contribute to a PR.

Thoughts?

One option is to use CVA, either with a library or manually…

3 Likes