How to comment Tailwind CSS class soup?

The method that I am using - TailwindFormatter - Opinionated tailwind class sorter for HEEx templates - #2 by c4710n

I have worked with Tailwind since early 2020 and to be honest, this is not a problem (IMO). However, to answer your question. You would solve this with having reusable components and/or a Tailwind framework like DaisyUI

With components you can split up the classes in a list:

        class={[
          input_border(@errors),
          "mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
          "text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
        ]}

(this is from the new phx 1.7 btw)

However, you can also name it with a custom class name and in the css-file define the Tailwind styes for that class.

.my-class {
  @apply bg-yellow-300 flex items-center;
}

OK, I think I get it now. Because of all the layers of syntax, this isn’t just a string of class names. Rather, it’s a list of strings, attributes, etc. So, I could do something like this:

class={
  [
    "phx-submit-loading:opacity-75",
    "w-full",         # foo
    "inline-flex",    # bar
    "justify-center", # baz
    ...
  ]
}

In practice, I don’t think I’d spread things out this much. Rather, I’d group related names, adding comments as needed.