How to comment Tailwind CSS class soup?

Questions & Help Questions
, , ,
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;
}