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-"