TailwindMerge

Utility function to efficiently merge Tailwind CSS classes in Elixir without style conflicts.

Inspired by tailwind-merge.

Why?

Overriding Tailwind CSS classes is unintuitive.

Due to the way the CSS Cascade works, the order of CSS styles applied on an element isn't based on the order of given classes, but the order in which CSS styles appear in CSS stylesheets. Because of that, when using Tailwind CSS classes which involve the same styles (we call them conflicting classes), the final styles are indeterminate.

<% # Is it red or green? It's hard to say. %>
<div class={["h-12 bg-red-500", "bg-green-500"]}></div>

TailwindMerge solves this problem by overriding conflicting classes and keeps everything else untouched.

<div class={TailwindMerge.merge(["h-12 bg-red-500", "bg-green-500"])}></div>
<% # equals to %>
<div class="h-12 bg-green-500"></div>

Installation

Add :tailwind_merge to the list of dependencies in mix.exs:

def deps do
  [
    {:tailwind_merge, <requirement>}
  ]
end

Usage

For more information, see the documentation.

Similar projects

• bratsche/twix
• zachdaniel/tails

License

Apache License 2.0 / MIT