Extra spaces in classes output if we use backticks

If I add many classes as a string value, then it becomes difficult to maintain the code without wrapping:

const variants = compose({
  slots: {
    root: "hover:border-blue-500 hover:border-solid hover:bg-white hover:text-blue-500 group w-full flex flex-col items-center justify-center rounded-md border-2 border-dashed border-slate-300 text-sm leading-6 text-slate-900 font-medium py-3",
  },
  defaultVariants: {},
})();

To solve this, I used backticks and interpolation with empty strings to add some comments for classes:

const fooVariants = compose({
  slots: {
    root: `
      hover:border-blue-500
      hover:border-solid
      hover:bg-white
      hover:text-blue-500

      ${/* Some comment here */ ""}
      group
      w-full
      flex
      flex-col
      items-center ${/* And some comment here */ ""}
      justify-center
      rounded-md
      border-2
      border-dashed
      border-slate-300
      text-sm
      leading-6
      text-slate-900
      font-medium
      py-3
    `,
  },
  defaultVariants: {},
})();

However, the problem with this approach is that all whitespaces are retained in the output:

It would be nice to clean up all extra spaces from the output if we use backticks for classes.

busbud / tailwind-buddy

Extra spaces in classes output if we use backticks #10