Why I love Tailwind

Max Stoiber wrote some interesting notes about why he loves Tailwind. (Max created styled-components, so he has some skin in the styling methodology game.) There’s a lot of great history in this post about how Tailwind emerged and became a valuable tool for designers and engineers alike, but he also talks about what beats at the very heart of the Tailwind system and what makes it just so handy:

The key to Tailwind’s popularity is the painstakingly constructed system of design tokens at the core of the framework. The system’s carefully selected constraints give developers just the right guardrails. They make it obvious whether a choice is good or bad by offering only discrete steps.

He links to twin.macro — something I’d never heard of before — then gives an example that looks something like this:

import "twin.macro"

<div tw="text-center md:text-left" />

// ↓↓↓↓↓ turns into ↓↓↓↓↓

import "styled-components/macro"

<div 
  css={{
    textAlign: "center",
    "@media (min-width: 768px)": {
      "textAlign":"left"
    }
  }}
/>

What’s happening here is that you can use predefined classes just like you would with Tailwind — add spacing, make a div round, and a certain size, etc. What twin.macro does is let you use these classes, but with the additional benefits of CSS-in-JS. Max writes:

You get fully automatic critical CSS extraction and code splitting. Users will only load exactly the styles they need for the page they requested — nothing more and nothing less!

I sort of love this, using Tailwind as a shorthand, treating it more like a syntactic sugar on top of CSS rather than as a framework. Super interesting stuff.

Direct Link →