View Source TailColors (TailColors v0.2.0)

Helper functions for working with tailwind classes

Summary

Functions

takes a list of classNames and a list of classes to remove, and then removes those classes if they appear in the classNames

takes a list of classNames and removes any colors that appear that do not follow the tailwind color struction prefix-color-tint #

takes a list of classNames and a list of classes to remove, and then removes those classes if they appear in the classNames

moves the tint down the list of tints.

takes list of classNames and prefix text or list of options, and finds first instance that matches, a default value can also be set

takes a list of classNames and matches the first class with the prefix and returns the match or default values

takes list of classNames and starting text, and finds first instance that matches with a known color and tint, a default value can also be set

takes a list of classNames and a string, and returns true if the string is in the list

takes a either a tint, or a color class, and returns a tint that is easier to read on that background #

moves the tint up the list of tints.

takes a list of classNames and finds any colors that appear that are not prefixed by a string followed by a - returns a tuple of {color, tint}

substitutes a themed color from config for the actual color name.

Functions

Link to this function

clean(class_list, remove_list)

View Source

takes a list of classNames and a list of classes to remove, and then removes those classes if they appear in the classNames

Examples

iex> TailColors.clean("thing needle something", "needle")
"thing something"
iex> TailColors.clean("thing something", "needle")
"thing something"
iex> TailColors.clean("thing needle haystack something", "needle haystack")
"thing something"
Link to this function

clean_colors(class_list)

View Source

takes a list of classNames and removes any colors that appear that do not follow the tailwind color struction prefix-color-tint #

Examples

iex> TailColors.clean_colors("thing blue something")
"thing something"
iex> TailColors.clean_colors("thing something")
"thing something"
iex> TailColors.clean_colors("thing blue red something")
"thing something"
Link to this function

clean_prefix(class_list, remove_list)

View Source

takes a list of classNames and a list of classes to remove, and then removes those classes if they appear in the classNames

Examples

iex> TailColors.clean_prefix("thing bg-blue-500 something", "bg")
"thing something"
iex> TailColors.clean_prefix("thing something", "bg")
"thing something"
iex> TailColors.clean_prefix("thing bg-green-200 text-red-600 something", "bg text")
"thing something"
Link to this function

darker(class_str, steps)

View Source

moves the tint down the list of tints.

Examples

iex> TailColors.darker(600, 1)
700

iex> TailColors.darker(600, 3)
900

iex> TailColors.darker(600, 9)
950

iex> TailColors.darker("text-green-400", 1)
"text-green-500"

iex> TailColors.darker("text-green-400", 9)
"text-green-950"

iex> TailColors.darker("not-a-tint", 1)
"not-a-tint"
Link to this function

get(classes, lookup, default \\ nil)

View Source

takes list of classNames and prefix text or list of options, and finds first instance that matches, a default value can also be set

Examples

iex> TailColors.get("thing rounded something", "rounded")
"rounded"

iex> TailColors.get("thing rounded-xl something", "rounded")
"rounded-xl"

iex> TailColors.get("thing else", "rounded")
nil

iex> TailColors.get("thing else", "rounded", "rounded-md")
"rounded-md"

iex> TailColors.get("thing box else", ["circle", "rounded", "box"])
"box"

iex> TailColors.get("thing else", ["circle", "rounded", "box"])
nil

iex> TailColors.get("thing else", ["circle", "rounded", "box"], "rounded")
"rounded"

takes a list of classNames and matches the first class with the prefix and returns the match or default values

Examples

iex> TailColors.get("thing text-red-400 something", "text", "blue", 600)
"text-red-400"

iex> TailColors.get("thing text-red something", "text", "blue", 600)
"text-red-600"

iex> TailColors.get("thing something", "text", "blue", 600)
"text-blue-600"
Link to this function

get_color(classes, lookup, default \\ nil)

View Source

takes list of classNames and starting text, and finds first instance that matches with a known color and tint, a default value can also be set

Examples

iex> TailColors.get_color("thing text-red-400 something", "text")
"text-red-400"

iex> TailColors.get_color("thing bg-blue", "bg")
"bg-blue"

iex> TailColors.get_color("thing else", "bg")
nil

iex> TailColors.get_color("thing bg-monster else", "bg")
nil

iex> TailColors.get_color("thing bg-blue-404 else", "bg")
nil

iex> TailColors.get_color("thing else", "bg", "bg-blue-600")
"bg-blue-600"

takes a list of classNames and a string, and returns true if the string is in the list

Examples

iex> TailColors.has?("thing text-red-400 something", "something")
true

iex> TailColors.has?("thing bg-blue", "something")
false

takes a either a tint, or a color class, and returns a tint that is easier to read on that background #

Examples

iex> TailColors.invert(200)
600
iex> TailColors.invert("bg-blue-600")
"bg-blue-50"
iex> TailColors.invert(nil)
nil
iex> TailColors.invert("weirdo")
"weirdo"
Link to this function

lighter(class_str, steps)

View Source

moves the tint up the list of tints.

Examples

iex> TailColors.lighter(600, 1)
500

iex> TailColors.lighter(600, 3)
300

iex> TailColors.lighter(600, 9)
50

iex> TailColors.lighter("text-green-400", 1)
"text-green-300"

iex> TailColors.lighter("text-green-400", 9)
"text-green-50"

iex> TailColors.lighter("not-a-tint", 1)
"not-a-tint"
Link to this function

main_color(classes, c, t)

View Source

takes a list of classNames and finds any colors that appear that are not prefixed by a string followed by a - returns a tuple of {color, tint}

Examples

iex> TailColors.main_color("thing red something", "blue", 700)
{"red", 700}

iex> TailColors.main_color("thing red-400 something", "blue", 700)
{"red", 400}

iex> TailColors.main_color("thing something", "blue", 700)
{"blue", 700}

substitutes a themed color from config for the actual color name.