Vanilla JavaScript support for Tailwind Plus

    <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.

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.

Why not use the web inspector? That’s usually the quickest way to see which style is applied to an element.

People would rather have to parse out a big dumb list of classes than look at the actual list of what properties affect something, with a clear ability to drill down into them. Its madness, akin to carpenters giving up hammers, preferring to use glue, because they hit their thumb a few times by accident

Based on the code I've seen, including written by old me, it seems more like designing the architecture of the CSS styles (and sticking to it) is something people don't like to do. Tailwind is just a tool that is nicer than using the style attribute on the element.

I strongly prefer "button is-primary is-fullwidth" over the long list of tailwind classes.