My Tailwind style guide

Tom Franssen — Mon, 23 Feb 2026 12:12:29 +0000

We use Tailwind CSS in production to power our e-commerce frontend (Vue.js + SSR) and kept running into the same problem: jumping between the
Tailwind docs to visually compare utility classes.

So we built a single-page style guide that shows everything rendered side by side.

## What's in it

Typography — every font size, weight, line height, and letter spacing rendered live
Colors — full palette swatches with class names and hex values
Spacing — padding and margin scale visualized with colored boxes
Flexbox & Grid — common layout patterns with live examples
Borders & Rounded — every border-radius variant from rounded-none to rounded-full
Shadows — shadow-sm through shadow-2xl on actual cards
Responsive breakpoints — table with pixel values + a live breakpoint indicator
Common patterns — card, button set, navbar, and form components with copy-paste markup

Every section includes the rendered result AND the code snippet.

## Check it out

https://winkelstraatnl.github.io/tailwind-style-guide/

The page itself is built entirely with Tailwind (eats its own dog food). It's a single HTML file with no build step — just the Tailwind CDN.

We keep it open as a quick reference for our team and figured it might be useful for others too. Feedback welcome.

DEV Community: Tom Franssen

My Tailwind style guide