How to comment Tailwind CSS class soup?

Phoenix Forum Questions / Help
, , ,
1

ElixirConf 2022 - Chris McCord - Phoenix + LiveView Updates contains (around 22:20) an example of Tailwind CSS class soup, used to define a button:

"phx-submit-loading:opacity-75 w-full inline-flex justify-center ...

The class names go on for several lines and, aside from making my eyes cross, have no indication of what they’re supposed to be doing.

If I were writing this, I’d want to break the definition onto multiple lines and comment each one with its purpose, caveats, etc. One way to do this would be to code the class names as a list of strings (one per line, with comments) and then concatenate them for actual use. However, I suspect there’s a cleaner way. Help?

-r

2

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

3

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;
}
2 Likes
4

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.