Tools: My Tailwind style guide
Source: Dev.to
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 hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - 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