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 😐
