←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 1 comments | 25 Jul 25 18:11 UTC | HN request time: 0s | 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 #
AstroBen ◴[26 Jul 25 03:10 UTC] No.44691000[source]▶
I just can't fathom how someone can look at this and think "yeahhhh thats some good clean code". How did tailwind get so popular? Learn plain CSS. It's really good now
replies(11): >>44691157 #>>44691381 #>>44691597 #>>44692249 #>>44692347 #>>44692490 #>>44692896 #>>44693989 #>>44694828 #>>44695704 #>>44697630 #
Jaygles ◴[26 Jul 25 03:48 UTC] No.44691157[source]▶
I've worked in many different FE codebases with a variety of CSS "strategies".

This sort of thing is objectively ugly and takes a minute to learn. The advantages of this approach I found is two-fold

1. You can be more confident that the changes you are making apply to only the elements you are interested in changing

You are modifying an element directly. Contrast with modifying some class that could be on any number of elements

2. You can change things around quite quickly

Once you're well familiar with your toolset, you know what to reach for to quickly reach a desired end state

replies(5): >>44691271 #>>44691311 #>>44691864 #>>44692944 #>>44693383 #
Levitating ◴[26 Jul 25 10:25 UTC] No.44692944[source]▶
Why not just use the style attribute?
replies(1): >>44693219 #
1. owebmaster ◴[26 Jul 25 11:25 UTC] No.44693219{3}[source]▶
verbosity. Using style, "p-4" becomes padding: calc(var(--spacing)*4);