Tools: 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. Every section includes the rendered result AND the code snippet. 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. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or - 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