←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 #
timeon ◴[26 Jul 25 09:51 UTC] No.44692803[source]▶
Not to mention that for every class here there is also definition in CSS that client needs to download.
replies(1): >>44699821 #
1. sensanaty ◴[27 Jul 25 08:39 UTC] No.44699821[source]▶
Tailwind tends to be smaller bundle-wise because it will only compile the styles you actually use in the final bundle. The old app I work on, the BEM classes are staggering in their size all combined, whereas the tailwind portions are tiny and importantly barely ever grow in size since the majority of code, old and new, will be using the same "building block" classes like flex p-4 or whatever.