Discussion on: Utility-first CSS - You have to try it first!

[perpetual . education]

This looks horrendous! My HTML will be forever ruined!!

That's what we still think

codepen.io/sheriffderek/pen/QWwyJmB

Why? When you could write this?

<user-card class='modifier?'>
  <picture class='avatar'>
    <img src='{{user.image}}'>
  </picture>

  <h1 class='name'>@{{user.handle}}</h1>
  <h2 class='title'>{{user.title}}</h2>

  <footer class='actions'>
    <a class='link' href='{{user.url}}'>
      {{user.cta}}
    </a>
  </footer>
</user-card>

[perpetual . education]

What if you wanted to switch CSS later?

[Michael Z]

I go more into detail regarding the benefits in this interactive tutorial: learning-by-vueing.netlify.app/tai...
Mind giving it a go?

[perpetual . education]

We'll check it out = but this type of URL https://learning-by-vueing.netlify.app/tailwind/pre/ is quickly becoming it's own meme. learning + vueing + netlify + app + tailwind + and even pre ! haha.

[perpetual . education]

Your playground area is cool. And the way you explain it is nice. Great job.

However, maybe we're crazy... but we LIKE CSS. So, we're not in any hurry to abstract it away. We've also built out really complex them-able systems (think old myspace) - and we're not seeing any pros of having super horrendous markup. Especially when you add in all of the dynamic properties and stuff...

<li x-for="someArray as currentItem" @event="doSomething" class="xd=15 color-blue-1299 roundy-thingies small-but-big-on-small-medium-exept-when-not shadow-small-lighter float-left-only-on-large etc etc-2">{{currentItem.content}}</li>

vs.

{{#forEach users as |user|}}
  <UserCard @model='user' />
{{/forEach}}

.

<user-card>
  <h2 class='name'>{{model.name}}</h2>
  <h3 class='title'>{{model.title}}</h3>
</user-card>

.

user-card
  round-corners()
  drop-shadow()
  padding: $pad
  .name
    attention-voice()
  .title
    calm-voice()
    margin-top: $pad

Or something readable. (not sure if this is valid / but for example)

Tailwind is GREAT if you are trying to avoid being a front-end developer / but we enjoy writing code for the front-end.