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?