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.

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

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

This is one of the least elegant ways to scope CSS though.. you may as well just write inline CSS

I like BEM personally. "navbar__item" scopes the styling to the nav item

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

This also applies to plain CSS, doesn't it?

The big value add that Tailwind brought isn't their utility classes IMO - it's their philosophy around having a design system of consistent coloring and spacing. I actually borrowed that for my own projects. It taught me to be a lot more diligent about specifying the system upfront. Put it in CSS variables and re-use those

You can’t use inline css it’s not at all the same.

Inline css

1. Can’t use media queries (responsive design).

2. Gets you to specificity hell - you loose ability to cascade.

3. Does not follow any system or reuse of values.

4. Values can’t be centrally changed. Utility clases are still classes - when you change class value it changes everywhere where the class is used.

5. Its verbose. Utility classes can have multiple css rules.

Conceptually it might seem that inline css is similar but thats just feeling. Functional css (utility classes) are about composing classes with simpler (one purpose) behaviour together to create complex behaviour.