My Tailwind style guide

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.