bratsche / twix

Tailwind class merging in Elixir

Twix

Twix is a small utility library for dealing with Tailwind classes in Elixir. It is inspired by tailwind-merge.

Problem

Overriding Tailwind classes is unintuitive. For example, suppose that there is a LiveView function component that renders a button:

attr :class, :string, default: ""
attr :label, :string, required: true

def button(assigns) do
  ~H"""
  <button type="button" class=(["inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-white shadow-sm hover:bg-green-700", @class]}>
    <%= @label %>
  </button>
  """
end

Now we have a very simple button component. But suppose we want to change some attributes, such as changing the color to red? Intuitively we might think that we can do something like:

<.button label="Cancel" class="bg-red-600 hover:bg-red-700" />

We switch back over to our browser, but we are disappointed to see that the button is still green! Our intuition might be that the bg-red-600 will override the bg-green-600 class, but that is not correct. What ends up happening is that both classes are defied on the HTML element and the one that "wins" is the one that appears later in the CSS stylesheets.

Solution

Twix provides a simple utility class to aid in solving this problem. It's the Twix.tw/1 function. This simply takes a string and determines the "winning" classes by what comes later in the string, not in the stylesheet. For example:

import Twix

attr :class, :string, default: ""
attr :label, :string, required: true

def button(assigns) do
  ~H"""
  <button type="button" class={tw(["inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-white shadow-sm hover:bg-green-700", @class])}>
    <%= @label %>
  </button>
  """
end

Now when we call <.button label="Cancel" class="bg-red-600 hover:bg-red-700"> it will retain all the default classes, but it will see that bg-green-600 and bg-red-600 both belong to the bg-color group and the last class of that group will be rendered in the string while all previous ones will be dropped. It will also see the hover variants and, once again, the last bg-color group with the hover variant will remain while all previous ones are dropped.

Now we have a red button, as we intended!

Installation

This package can be installed by adding twix to your list of dependencies in mix.exs:

def deps do
  [
    {:twix, "~> 0.3.0"}
  ]
end

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/twix.

twix's Issues

Installation of 0.2.0 fails

Just added twix to my app and immediately got this error:

== Compilation error in file lib/twix/default_config.ex ==
** (Code.LoadError) could not load /Users/ian/work/project/app/deps/twix/config/config_utils.exs. Reason: enoent
    (elixir 1.14.0) lib/code.ex:1807: Code.find_file!/2
    (elixir 1.14.0) lib/code.ex:1184: Code.eval_file/2
    lib/twix/default_config.ex:2: (module)

Add support for opacity modifier

For example, bg-blue-500/75.

Custom prefix fails

Hi - It seems like Twix does not work correctly when custom prefixes are involved. I am running on master, and this is what I get:

iex(15)> Twix.tw(["mt-2 block w-full rounded-lg border-zinc-300", "mt-0"])                  
"block w-full rounded-lg border-zinc-300 mt-0"
iex(16)> Twix.tw(["tw-mt-2 tw-block tw-w-full tw-rounded-lg tw-border-zinc-300", "tw-mt-0"])
"tw-mt-2 tw-block tw-w-full tw-rounded-lg tw-border-zinc-300 tw-mt-0"
iex(17)> 

Would this be a big effort to support prefixes? I am migrating my app from Bootstrap to Tailwind, so a prefix is necessary in this case.

Should we combine tail_colors package into twix

Hey there, I built a hex package and the more that I started using it myself, the more I realized that twix provides a much better way of handling a lot of the functionality that I was building out. So I went through and added twix and that seriously cut my code by about 2/3rds 👍 .

So now all that tail_colors does is provide the ability to pass in triggers in the class string that a component can use to determine layout/styling, as well as provide a methodology to target classes to nested elements within a component.

Would it make sense to add that functionality to twix and to just retire the tail_colors library? Would love to get your thoughts!
If you think it's a good idea, I'd be happy to put together a PR. Thanks

Don't error on atom lookup on custom classes

I have several classes that are custom like form-input along with vanilla tailwind classes. If these go through tw/1 calls, an error is returned. Is it possible to have unknown values fall through?

Custom classes support

It would nice, if DefaultConfig would support different config (extending or appending).

can you add support for arbitrary color?

iex(3)> Twix.tw(["text-white", "text-green-500"])
"text-green-500"
iex(4)> Twix.tw(["text-white", "text-[#00ff00]"])
** (ArgumentError) errors were found at the given arguments:

  * 1st argument: not an already existing atom

    (erts 14.0) :erlang.binary_to_existing_atom("text-[#00ff00]", :utf8)
    (twix 0.3.0) lib/twix.ex:53: Twix.get_conflicting_class_group_ids/1
    (twix 0.3.0) lib/twix.ex:44: anonymous fn/2 in Twix.handle_conflicts/1
    (elixir 1.15.5) lib/enum.ex:2510: Enum."-reduce/3-lists^foldl/2-0-"/3
    (twix 0.3.0) lib/twix.ex:33: Twix.handle_conflicts/1
    (twix 0.3.0) lib/twix.ex:17: Twix.tw/1
    iex:4: (file)

seems there is no code for arbitrary color value validation