Tailwind as a Shorthand, Not a Framework

Max Stoiber — the creator of styled-components — has shared his thoughts on why he loves Tailwind, offering both a slice of the tool’s history and a look at what makes it tick. At the core, he argues, is a carefully assembled system of design tokens that act as guardrails for developers.

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.

Stoiber also points to twin.macro, a tool that blends Tailwind’s utility classes with the benefits of CSS-in-JS.

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"
    }
  }}
/>

With it, you still use predefined classes for spacing, rounding, sizing, and more — but you gain the perks of a CSS-in-JS setup:

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!

The appeal here is treating Tailwind as syntactic sugar layered on top of CSS rather than a rigid framework — a clever approach worth a closer look.