An API for your design

Your tokens go in, the framework's utilities come out.

Adam Wathan@adamwathan
@chandika_hashan @tailwindcss I think of Tailwind as an API for your design system, and it just happens to come with a default one 👍🏻
Jun 29, 2019View on X ↗
Adam Wathan@adamwathan
@nystudio107 @P_Harrington83 @michaelrog @jonmelville @marionnewlevant @tailwindcss Haha love it! If we ever needed proof that Tailwind doesn't have "a look", this is it 😄 Very cool design!
Dec 12, 2017View on X ↗
Adam Wathan@adamwathan
@MarkPrzepiora @garybernhardt Tailwind doesn't really *need* the build step forever which is nice, PostCSS is just used to generate your CSS file from your design tokens. If your design system doesn't change, you can just stick the static CSS file forever 👍
Jun 20, 2019View on X ↗

Demo generates its utilities live from the tokens you edit.

Preset

Tokens in, look out

Edit a token or pick a preset. Same markup in both.

Look baked inBad
Tokens drive itGood

Why it matters, pros and cons

Why it matters

The default look is only the first config. Utilities are generated from your tokens, so the same markup can wear any design.

Pros

  • One config change restyles every page that uses the utilities.
  • Markup stays the same across brands and themes.
  • The output is plain static CSS you can keep as is.

Cons

  • You must define the tokens; the defaults are only a starting point.
  • Unedited defaults make every site look alike.
  • A design with few, fixed screens may not need a token layer.