Twix is a small utility library for dealing with Tailwind classes in Elixir. It is inspired by tailwind-merge.
Overriding Tailwind classes is unintuitive. For example, suppose that there is a LiveView function component that renders a button:
attr :class, :string, default: ""
attr :label, :string, required: true
def button(assigns) do
~H"""
<button type="button" class=(["inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-white shadow-sm hover:bg-green-700", @class]}>
<%= @label %>
</button>
"""
end
Now we have a very simple button component. But suppose we want to change some attributes, such as changing the color to red? Intuitively we might think that we can do something like:
<.button label="Cancel" class="bg-red-600 hover:bg-red-700" />
We switch back over to our browser, but we are disappointed to see that the button is still green! Our intuition might be that
the bg-red-600
will override the bg-green-600
class, but that is not correct. What ends up happening is that both classes
are defied on the HTML element and the one that "wins" is the one that appears later in the CSS stylesheets.
Twix provides a simple utility class to aid in solving this problem. It's the Twix.tw/1
function. This simply takes
a string and determines the "winning" classes by what comes later in the string, not in the stylesheet. For example:
import Twix
attr :class, :string, default: ""
attr :label, :string, required: true
def button(assigns) do
~H"""
<button type="button" class={tw(["inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-white shadow-sm hover:bg-green-700", @class])}>
<%= @label %>
</button>
"""
end
Now when we call <.button label="Cancel" class="bg-red-600 hover:bg-red-700">
it will retain all the default classes, but it will
see that bg-green-600
and bg-red-600
both belong to the bg-color
group and the last class of that group will be rendered in
the string while all previous ones will be dropped. It will also see the hover
variants and, once again, the last bg-color
group
with the hover
variant will remain while all previous ones are dropped.
Now we have a red button, as we intended!
If you are defining custom colors in you tailwind.config.js file, you can extend the colors that Twix will recognize by adding the following to your config.exs file:
config :twix, colors: ["my_first_custom_color", "my_second_custom_color", "etc"]
``
This package can be installed by adding twix
to your
list of dependencies in mix.exs
:
def deps do
[
{:twix, "~> 0.3.0"}
]
end
Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/twix.