←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 4 comments | 25 Jul 25 18:11 UTC | HN request time: 0.325s | source
Show context
ricardobeat ◴[25 Jul 25 22:13 UTC] No.44689124[source]▶

    <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in">
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
replies(14): >>44689142 #>>44689193 #>>44689633 #>>44690309 #>>44690466 #>>44690969 #>>44691000 #>>44691208 #>>44691531 #>>44692110 #>>44692147 #>>44692803 #>>44694185 #>>44700048 #
1. emmanueloga_ ◴[26 Jul 25 01:24 UTC] No.44690466[source]▶
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.
replies(3): >>44691169 #>>44696198 #>>44714000 #
2. Brajeshwar ◴[26 Jul 25 03:52 UTC] No.44691169[source]▶
I do this to this day, when I’m writing manual vanilla CSS. I group spacings, fonts, texts, borders etc together so it is easier for me to debug without using too many tools.
3. serhalp ◴[26 Jul 25 18:50 UTC] No.44696198[source]▶
You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!
4. criswell ◴[28 Jul 25 18:50 UTC] No.44714000[source]▶
This takes away so many of the criticisms I see in this thread. The issue with Tailwind, and my only minor criticism, is just long, unreadable, not easy to deliminate lists of classes. This very easily takes care of that (and I use it for more complex class lists daily)