Comment

Comment by emmanueloga_

In real projects I typically group the classes in a way that makes it easier to read, something like this:

    <div class={tw(
      "block",
      "transform transition-all",
      "bg-white ring-1 ring-black/5 rounded-xl shadow-2xl",

      "max-w-3xl mx-auto overflow-hidden",

      "group-data-closed/dialog:opacity-0",
      "group-data-closed/dialog:scale-95",

      "group-data-enter/dialog:duration-300",
      "group-data-enter/dialog:ease-out",

      "group-data-leave/dialog:duration-200",
      "group-data-leave/dialog:ease-in"
    )}>
        ...
    </div>
I currently do this manually but it would be nice to have some tooling to automate that kind of format.

Discussion

Live from the official Hacker News API

A modern reader for Hacker News · SvelteKit + Skeleton