Merge Tailwind CSS classes in Elixir without style conflicts.

Usage

Use the default Tailwind config directly:

TailwindCombine.merge("p-2 p-4")
# "p-4"

Nested class lists are also supported:

TailwindCombine.merge(["p-2", nil, ["hover:p-2", "hover:p-4"]])
# "p-2 hover:p-4"

To create a dedicated helper module, define one in your project:

defmodule DemoWeb.ClassHelper do
  use TailwindCombine
end

Then, DemoWeb.ClassHelper.tw/1 will be available to use.

Customization

To customize the default behaviour, passing options to the use call:

• :config - specify the config to use.
• :as - specify the name of generated function.

Let's customize colors to use:

defmodule DemoWeb.ClassHelper do
  existing_colors = TailwindCombine.Config.colors()
  new_colors = existing_colors ++ ["primary", "secondary"]
  new_class_groups = TailwindCombine.Config.class_groups(colors: new_colors)

  use TailwindCombine,
    config: TailwindCombine.Config.new(class_groups: new_class_groups),
    as: :merge_class
end

Then, call it:

DemoWeb.ClassHelper.merge_class("text-red-300 text-primary")
# "text-primary"