Yatm provides a Tailwind class merging utility to resolve conflicts, i.e. classes targeting the same CSS property.

When using Tailwind with component abstractions, authors usually provide some styling out of the box and consumers want to override some of that styling. The naive solution is to replace or append those extra classes:

def button(assigns) do
  ~H"""
  <button type={@type} class={[button_classes(), @class]} {@rest}>
    {render_slot(@inner_block)}
  </button>
  """
end

But this easily ends up in conflicts. The purpose of this package is to offer a utility to solve these. When provided a sequence of Tailwind utility classes with conflicts, later instances override earlier instances.

Calling Yatm.merge("text-sm text-xl") will return "text-xl" and calling Yatm.merge("text-xl text-sm") will return "text-sm".

In the JavaScript ecosystem, tailwind-merge is likely the most popular solution. In Elixir, several packages have been created for this already (tails, twix, tailwind_merge, turboprop). As far as I can tell, tw_merge is the most recent and alive attempt, a fork of the Tailwind-related code in Turboprop.

Yatm is that, yet another attempt. At this point it’s a bit of an experiment and learning project. I’m not entirely sure if it’ll pan out and whether it’ll be maintainable or performant or if the approach I have in mind is sound.

It uses nimble_parsec to parse the strings of Tailwind classes and annotate each class with the CSS property it targets. It then reduces the list of annotated nodes into a map with (loosely) CSS properties as keys. This effectively achieves the conflict resolution (values of keys get overwritten). Finally, it concatenates the classes that remain to produce the merged conflict-free class string.

It exports a merge/1 function at the moment, but I’d like to see if this can be built into an EEx engine so that the merging of class strings can happen transparently as part of the compilation of templates.

The library is in very early stages and doesn’t yet cover many Tailwind features. You’re welcome to try it out. Feedback appreciated!