My Tailwind style guide

Source: Dev.to

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.