Figma To Tailwind

Reference guide for translating Figma designs into production-ready components with semantic HTML, Tailwind 4, and tailwind-variants.

---

Semantic HTML

Element	Use when
<article>	Self-contained, independently distributable content (cards, posts, products)
<section>	Thematic grouping with its own heading — not for layout grouping
<div>	Pure layout grouping with no semantic meaning
<button>	Actions that don't navigate (modals, sidebars, triggering logic)
<a>	Navigation to a URL — always include href

• If reaching for <section> just to group layout rows inside a card, use <div> instead
• Never use <h1> inside a repeated card — only one <h1> per page. Use or lower inside cards; when in doubt, use with text styles