View Source Turboprop.Merge (Turboprop v0.4.2)
Turboprop Merge 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, Turboprop Merge 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
Turboprop Merge 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 :turboprop,
prefix: "tw-"
Summary
Functions
Joins a list of classes.
Joins and merges a list of classes.
Passes the input to join/1
before merging.