Tails (tails v0.1.0)
Tailwind class utilities like class merging.
In most cases, only classes that we know all of the values for are merged. In some cases, we merge anything starting with a given prefix. Eventually, we will have tools to read your tailwind config to determine additional classes to merge, or have explicit configuration on additional merge logic.
The preferred way to use tails classes the classes/1
function. This gives you:
- conditional classes
- list merging (from left to right)
- arbitrary nesting
For example:
classes(["mt-1 mx-2", ["pt-2": var1, "pb-4", var2], "mt-12": var3])
Will merge all classes from left to right, flattening the lists and conditionally including the classes where the associated value is true.
what-classes-are-currently-merged
What classes are currently merged?
directional-classes
Directional classes
These classes support x/y/l/r suffix merging.
- Padding -
p
- Margin -
m
only-explicitly-known-values
Only explicitly known values
Only explicitly known values will be merged, all others will be retained.
- Position -
static
,fixed
,absolute
,relative
,sticky
- Display -
block
,inline-block
,inline
,flex
,inline-flex
,table
,inline-table
,table-caption
,table-cell
,table-column
,table-column-group
,table-footer-group
,table-header-group
,table-row-group
,table-row
,flow-root
,grid
,inline-grid
,contents
,list-item
,hidden
- Text Overflow -
truncate
,text-ellipsis
,text-clip
- Font Weight -
font-thin
,font-extralight
,font-light
,font-normal
,font-medium
,font-semibold
,font-bold
,font-extrabold
,font-black
- Font Styles -
font-thin
,font-extralight
,font-light
,font-normal
,font-medium
,font-semibold
,font-bold
,font-extrabold
,font-black
- Outline Style -
outline-none
,outline-dashed
,outline-dotted
,outline-double
- Outline Color - colors
- Background Size -
bg-auto
,bg-cover
,bg-contain
- Background Repeat -
bg-repeat
,bg-no-repeat
,bg-repeat-x
,bg-repeat-y
,bg-repeat-round
,bg-repeat-space
- Background Positions -
bg-bottom
,bg-center
,bg-left
,bg-left-bottom
,bg-left-top
,bg-right
,bg-right-bottom
,bg-right-top
,bg-top
- Background Blend -
bg-blend-normal
,bg-blend-multiply
,bg-blend-screen
,bg-blend-overlay
,bg-blend-darken
,bg-blend-lighten
,bg-blend-color-dodge
,bg-blend-color-burn
,bg-blend-hard-light
,bg-blend-soft-light
,bg-blend-difference
,bg-blend-exclusion
,bg-blend-hue
,bg-blend-saturation
,bg-blend-color
,bg-blend-luminosity
- Background Origin -
bg-origin-border
,bg-origin-padding
,bg-origin-content
- Background Clip -
bg-clip-border
,bg-clip-padding
,bg-clip-content
,bg-clip-text
- Background Image -
bg-none
,bg-gradient-to-t
,bg-gradient-to-tr
,bg-gradient-to-r
,bg-gradient-to-br
,bg-gradient-to-b
,bg-gradient-to-bl
,bg-gradient-to-l
,bg-gradient-to-tl
- Background - colors
- Text Color - colors
- Background Attachment -
bg-fixed
,bg-local
,bg-scroll
any-values-matching-prefix
Any values matching prefix
Any values matching the following prefixes will be merged with eachother respectively
- Animate -
animate
- Text -
text
- Outline Width -
outline
- Outline Offset -
outline-offset
- Grid Cols -
grid-cols
- Grid Rows -
grid-rows
- Width -
w
- Height -
h
Link to this section Summary
Link to this section Types
@type t() :: %Tails{ animate: term(), bg: term(), bg_attachment: term(), bg_blend: term(), bg_clip: term(), bg_image: term(), bg_origin: term(), bg_positions: term(), bg_repeat: term(), bg_size: term(), classes: term(), display: term(), font_styles: term(), font_weight: term(), grid_cols: term(), grid_rows: term(), height: term(), m: term(), outline_color: term(), outline_offset: term(), outline_style: term(), outline_width: term(), p: term(), position: term(), text: term(), text_color: term(), text_overflow: term(), theme: term(), variant: term(), variants: term(), width: term() }
Link to this section Functions
amber_50()
amber_100()
amber_200()
amber_300()
amber_400()
amber_500()
amber_600()
amber_700()
amber_800()
amber_900()
black()
blue_50()
blue_100()
blue_200()
blue_300()
blue_400()
blue_500()
blue_600()
blue_700()
blue_800()
blue_900()
blueGray_50()
blueGray_100()
blueGray_200()
blueGray_300()
blueGray_400()
blueGray_500()
blueGray_600()
blueGray_700()
blueGray_800()
blueGray_900()
classes(classes)
Builds a class string out of a mixed list of inputs or a string.
If the value is a string, we make a new Tails
with it (essentially deduplicating it).
If the value is a list, then for each item in the list:
- If the value is a list, we call
classes/1
on it. - If it is a tuple, we discard it unless the second element is truthy.
- Otherwise, we
to_string
it
And then we merge the whole list up into one class string.
This allows for conditional class rendering, arbitrarily nested. For example:
iex> classes(["a", "b"]) "a b" iex> classes([a: false, b: true]) "b" iex> classes([[a: true, b: false], [c: false, d: true]]) "a d"
coolGray_50()
coolGray_100()
coolGray_200()
coolGray_300()
coolGray_400()
coolGray_500()
coolGray_600()
coolGray_700()
coolGray_800()
coolGray_900()
current()
cyan_50()
cyan_100()
cyan_200()
cyan_300()
cyan_400()
cyan_500()
cyan_600()
cyan_700()
cyan_800()
cyan_900()
emerald_50()
emerald_100()
emerald_200()
emerald_300()
emerald_400()
emerald_500()
emerald_600()
emerald_700()
emerald_800()
emerald_900()
fuchsia_50()
fuchsia_100()
fuchsia_200()
fuchsia_300()
fuchsia_400()
fuchsia_500()
fuchsia_600()
fuchsia_700()
fuchsia_800()
fuchsia_900()
gray_50()
gray_100()
gray_200()
gray_300()
gray_400()
gray_500()
gray_600()
gray_700()
gray_800()
gray_900()
green_50()
green_100()
green_200()
green_300()
green_400()
green_500()
green_600()
green_700()
green_800()
green_900()
indigo_50()
indigo_100()
indigo_200()
indigo_300()
indigo_400()
indigo_500()
indigo_600()
indigo_700()
indigo_800()
indigo_900()
inherit()
lightBlue_50()
lightBlue_100()
lightBlue_200()
lightBlue_300()
lightBlue_400()
lightBlue_500()
lightBlue_600()
lightBlue_700()
lightBlue_800()
lightBlue_900()
lime_50()
lime_100()
lime_200()
lime_300()
lime_400()
lime_500()
lime_600()
lime_700()
lime_800()
lime_900()
merge(list)
Merges a list of class strings. See merge/2
for more
merge(tailwind, classes)
Semantically merges two lists of tailwind classes, treating the first as a base and the second as overrides
Generally, instead of calling merge/2
you will call classes/1
with a list of classes.
See the module documentation for what classes will be merged/retained.
Examples
iex> merge("p-4", "p-2") |> to_string()
"p-2"
iex> merge("p-2", "p-4") |> to_string()
"p-4"
iex> merge("p-4", "px-2") |> to_string()
"px-2 py-4"
iex> merge("font-bold", "font-thin") |> to_string()
"font-thin"
iex> merge("block absolute", "fixed hidden") |> to_string()
"fixed hidden"
iex> merge("bg-blue-500", "bg-auto") |> to_string()
"bg-auto bg-blue-500"
iex> merge("bg-auto", "bg-repeat-x") |> to_string()
"bg-auto bg-repeat-x"
iex> merge("bg-blue-500", "bg-red-400") |> to_string()
"bg-red-400"
iex> merge("grid grid-cols-2 lg:grid-cols-3", "grid-cols-3 lg:grid-cols-4") |> to_string()
"grid grid-cols-3 lg:grid-cols-4"
iex> merge("font-normal text-black hover:text-blue-300", "text-gray-600 dark:text-red-400 font-bold") |> to_string()
"font-bold text-gray-600 hover:text-blue-300 dark:text-red-400"
Classes can be removed
iex> merge("font-normal text-black", "remove:font-normal grid") |> to_string()
"grid text-black"
All preceeding classes can be removed
iex> merge("font-normal text-black", "remove:* grid") |> to_string()
"grid"
Classes can be explicitly kept
iex> merge("font-normal text-black", "remove:font-normal grid") |> to_string()
"grid text-black"
neutral_50()
neutral_100()
neutral_200()
neutral_300()
neutral_400()
neutral_500()
neutral_600()
neutral_700()
neutral_800()
neutral_900()
orange_50()
orange_100()
orange_200()
orange_300()
orange_400()
orange_500()
orange_600()
orange_700()
orange_800()
orange_900()
pink_50()
pink_100()
pink_200()
pink_300()
pink_400()
pink_500()
pink_600()
pink_700()
pink_800()
pink_900()
purple_50()
purple_100()
purple_200()
purple_300()
purple_400()
purple_500()
purple_600()
purple_700()
purple_800()
purple_900()
red_50()
red_100()
red_200()
red_300()
red_400()
red_500()
red_600()
red_700()
red_800()
red_900()
remove(tailwind, class)
Removes the given class from the class list.