View Source TwMerge (TwMerge v0.1.1)

TwMerge adds efficient class joining and merging of TailwindCSS classes to Elixir.

TailwindCSS class names are composable and allow specifying an infinite amount of different styles. Most components allow overriding class names, like as passing class attribute that then gets merged with the existing styles. This can result in class lists such as text-white bg-red-500 bg-blue-300 where text-white bg-red-500 is the preset style, and bg-blue-300 is the override for that one specific button that needs to look slightly different. Styles based on class are applied according to the order they are defined at in the stylesheet. In this example, because TailwindCSS orders color definitions alphabetically, the override does not work. blue is defined before red, so the bg-red-500 class takes precedence since it was defined later.

In order to still allow overriding styles, TwMerge traverses the entire class list, creates a list of all classes and which conflicting groups of styles exist in them and gives precedence to the ones that were defined last in the class list, which, unlike the stylesheet, is in control of the user.

Example

iex> merge("text-white bg-red-500 bg-blue-300")
"text-white bg-blue-300"

iex> merge(["px-2 py-1 bg-red hover:bg-dark-red", "p-3 bg-[#B91C1C]"])
"hover:bg-dark-red p-3 bg-[#B91C1C]"

Configuration

TwMerge does not currently support full theme configuration - that's on the roadmap!

The limited configuration at the moment is adding Tailwind's prefix option.

config :tw_merge,
  prefix: "tw-"

Summary

Functions

Joins a list of classes.

Joins and merges a list of classes.

Functions

join(input)

Joins a list of classes.

merge(input, config \\ Config.config())

@spec merge(list(), term()) :: binary()

Joins and merges a list of classes.

Passes the input to join/1 before merging.