←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 3 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 #
monkey_monkey ◴[25 Jul 25 22:15 UTC] No.44689142[source]▶
Yes I agree - it's nice to be able to see exactly what's happening without needing to dive into a rats nest of fragile CSS cascades.
replies(3): >>44689203 #>>44689212 #>>44690264 #
1. vitaflo ◴[26 Jul 25 00:43 UTC] No.44690264[source]▶
This is literally a rats nest of css cascades.
replies(2): >>44691599 #>>44692598 #
2. softwreoutthere ◴[26 Jul 25 05:30 UTC] No.44691599[source]▶
Its atomic though, which is easier for some to reason about. I use devtools.
3. omnimus ◴[26 Jul 25 09:06 UTC] No.44692598[source]▶
It is not. Utility all classes have basic specificity of 0-1-0. There is no cascade just order of classes that all have same specificity.