Tailwind and Utility First CSS

What is tailwind?

A utility-first CSS framework

Most CSS frameworks do too much.

 

They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

If you think about it 🤔

 

It's just like JS, react  doesn't do "too-much" instead it gives you primitves that you work with to build your complex apps.

How good is a CSS framework that does nothing?

We don't have to choose between "everything" and "nothing"

Responsiveness

Do we opt in for a 12-column grid system?

What about inconsistent layouts?

Does everything fit in the 12-col cookie cutter?

Components

Do you really need a card in every single design you build?

How hard is it to build one from scratch?

.Card {
  padding: 24px;
  border-radius: 9999999px;
  width: 100%;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Design Systems

Brands have a unique feel to them, does your framework have an opinion on primary colors?

Imagine a red brand like Vodafone, how confusing is the primary action having the same color as the error state?

Do you enjoy overriding CSS classes for fun? You must be really good with CSS specifity!

Lessons from JS

Favor composition over inheritance

Lessons from JS

You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.

So where does utility-first css come in?

Utility first frameworks leverage the fundmental idea of composition in CSS

Which is fancy for saying: applying too many classes

<section>
  <h2 class="mt-10 flex text-off-white items-center">
    <svg class="fill-current w-6 h-6" viewBox="0 0 24 24">
      <path
        d="M4,15H6A2,2 0 0,1 8,17V19H9V17A2,2 0 0,1 11,15H13A2,2 0 0,1 15,17V19H16V17A2,2 0 0,1 18,15H20A2,2 0 0,1 22,17V19H23V22H1V19H2V17A2,2 0 0,1 4,15M11,7L15,10L11,13V7M4,2H20A2,2 0 0,1 22,4V13.54C21.41,13.19 20.73,13 20,13V4H4V13C3.27,13 2.59,13.19 2,13.54V4A2,2 0 0,1 4,2Z"
      />
    </svg>
    <span class="ml-3 text-md font-bold">You can't even tell what this SVG is</span>
  </h2>

  <div class="mt-10 flex">
    <button
      class="rounded-lg text-off-white border border-off-white px-6 py-3 hover:bg-brand-gold focus:bg-brand-gold hover:border-brand-gold hover:font-semibold hover:text-brand-dark"
    >
      Look at all those classes
    </button>
  </div>
</section>

“Might as well use inline styles”

😱

<h2 style="font-size: 16px; font-weight: bold; color: purple">Stranger Things</h2>
<p style="font-size: 13px; font-style: italic">Stranger Things is an American science fiction-horror web television...</p>
<h2 style="font-size: 16px; font-weight: bold; color: purple">Game of Thrones</h2>
<p style="font-size: 13px; font-style: italic">Game of Thrones is an American fantasy drama television...</p>

<h2 class="font-16 font-bold font-purple">Stranger Things</h2>
<p class="font-13 font-italic">Stranger Things is an American science fiction-horror web television...</p>
<h2 class="font-16 font-bold font-purple">Game of Thrones</h2>
<p class="font-13 font-italic">Game of Thrones is an American fantasy drama television...</p>

“separation of concerns”

What about muh....

😱

<style>
.greeting {
    text-align: center;
}
</style>

<p class="greeting">
    Hello there!
</p>

Which is more readable?

<p class="text-center">
    Hello there!
</p>

<p class="greeting">
    Hello there!
</p>

<div class="author-bio">
  <div class="author-bio__content">
    <h2 class="author-bio__name">Abdelrahman Awad</h2>
    <p class="author-bio__body">
      Abdelrahman is a professional twitch memer.
    </p>
  </div>
</div>

BEM to the rescue

BEM to the rescue? 

.author-bio {
  background-color: white;
  border: 1px solid hsl(0,0%,85%);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}
.author-bio__image {
  display: block;
  width: 100%;
  height: auto;
}
.author-bio__content {
  padding: 1rem;
}
.author-bio__name {
  font-size: 1.25rem;
  color: rgba(0,0,0,0.8);
}
.author-bio__body {
  font-size: 1rem;
  color: rgba(0,0,0,0.75);
  line-height: 1.5;
}

think about dependency direction

Would you write CSS that depends on HTML?

or HTML that depends on CSS?

A better question:

What would be more valuable: restyleable HTML, or reusable CSS?

“It’s unmaintainable”

😱

<button class="rounded-lg text-off-white border border-off-white px-6 py-3 hover:bg-brand-gold focus:bg-brand-gold hover:border-brand-gold hover:font-semibold hover:text-brand-dark">
  Look at all those classes
</button>

What do we do to a repeating pattern?

<AppBtn>
  Where did they go?
</AppBtn>

Tailwind is an API for your design system

It treats HTML as a consumer of an API, reaching out for a limited set of spacing, colors and options

Providing primitives and you can build complex UIs with them because they are not opinionated in any way.

Tailwind is an API for your design system

Its build on top of PostCSS allowing you to write custom classes, override any value and add new values.

If the predefined limited styles are not enough for you, tailwind is infinitely scalable.

It's Fast 💨

Demo

Live Demo

Code something random from team's choosing

 

I will probably regret this 😐

Sources

Thanks 👋

Tailwind and Utility First CSS

By Abdelrahman Awad

Made with Slides.com

Tailwind and Utility First CSS

  • 825

More from Abdelrahman Awad