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:

  1. conditional classes
  2. list merging (from left to right)
  3. 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

Functions

Builds a class string out of a mixed list of inputs or a string.

Merges a list of class strings. See merge/2 for more

Semantically merges two lists of tailwind classes, treating the first as a base and the second as overrides

Removes the given class from the class list.

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

Link to this function

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"

Link to this function

lightBlue_100()

Link to this function

lightBlue_200()

Link to this function

lightBlue_300()

Link to this function

lightBlue_400()

Link to this function

lightBlue_500()

Link to this function

lightBlue_600()

Link to this function

lightBlue_700()

Link to this function

lightBlue_800()

Link to this function

lightBlue_900()

Merges a list of class strings. See merge/2 for more

Link to this function

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"
Link to this function

remove(tailwind, class)

Removes the given class from the class list.