Design in the browser

Style the real element directly and skip the naming step.

Adam Wathan@adamwathan
One of my first projects for the new year is going to be a "Designing with @tailwindcss" video course, which will help you learn Tailwind as a tool, as well as how to use it to design in the browser and actually implement common components and layouts 👍🏻 Price: $0 🙌🏻
Dec 20, 2018View on X ↗
Adam Wathan@adamwathan
✨ I rebuilt Coinbase with @tailwindcss and turned it into a @CodePen! No config changes, no custom CSS 💅🏻
Dec 15, 2017View on X ↗
Adam Wathan@adamwathan
Ended up here, not bad for a couple of hours of work and writing no CSS 👍🏻
Dec 14, 2017View on X ↗

Demo counts your steps live: one per toggle, three per try with a stylesheet.

Try a style

Toggle a class on each card.

Name, save, reloadBad
Edit the markupGood
<div class="rounded-2xl p-6 shadow-lg ring-1 uppercase">
  Pro plan
</div>

Why it matters, pros and cons

Why it matters

Styling in the markup keeps the loop at one step. You judge the real element, not a name you had to invent first.

Pros

  • Each try is one edit, and you see the real result at once.
  • No stylesheet to open, no class name to think up.
  • Changes stay on the element, so nothing else moves.

Cons

  • Long class lists in markup take some getting used to.
  • Repeated pieces need a component once the list is copied.
  • A quick mock-up may not need a real design pass.