Figma → Tailwind Workspace

Back to overviewBack

Figma → Tailwind

All tools

100%

Sarah Chen

Senior Engineer

Active

View Profile

Computed classes

Desktop / 1440px

flex-colflexitems-centerjustify-centergap-6p-10bg-slate-50

Issues4

errorContrast 4.17:1 on “Senior Engineer” fails WCAG AA (needs 4.5:1)
Darken the text or lighten the background in Figma, then re-import.
errorContrast 4.37:1 on “Active” fails WCAG AA (needs 4.5:1)
Darken the text or lighten the background in Figma, then re-import.
info“Action Button” — render as a semantic <button>?
info“Button Text” — render as a semantic <button>?

@apply

1<div class="flex-col flex items-center justify-center gap-6 p-10 bg-slate-50">
2  <div class="flex-row flex items-center gap-4 p-6 bg-white border border-slate-200 rounded-2xl shadow-lg">
3    <img class="w-12 h-12 shrink-0 bg-slate-300 rounded-full" src="/avatar.png" alt="Avatar image">
4    <div class="flex-col flex gap-1">
5      <p class="text-base text-zinc-800 font-semibold leading-normal">Sarah Chen</p>
6      <p class="text-sm text-slate-500 font-normal">Senior Engineer</p>
7      <div class="flex-row flex gap-2">
8        <div class="flex-row flex pt-1 pr-3 pb-1 pl-3 bg-green-100 rounded-full">
9          <p class="text-xs text-green-700 font-medium">Active</p>
10        </div>
11        <button class="flex-row flex pt-2 pr-4 pb-2 pl-4 bg-blue-600 rounded-lg">
12          <p class="text-sm text-white font-medium">View Profile</p>
13        </button>
14      </div>
15    </div>
16  </div>
17</div>

Conversion log

✓layoutMode: VERTICAL → `flex flex-col`

✓gap: 24px → `gap-6` (exact match)

✓p: 40px → `p-10` (exact match)

✓bg: #f7fafc → `bg-slate-50` (exact match)

✓layoutMode: HORIZONTAL → `flex flex-row`

✓gap: 16px → `gap-4` (exact match)

✓p: 24px → `p-6` (exact match)

✓bg: #ffffff → `bg-white` (exact match)

✓border: #e3e8f0 → `border-slate-200` (exact match)

✓cornerRadius: 16px → `rounded-2xl` (exact match)

✓drop shadow blur 24px → `shadow-lg`

✓w: 48px → `w-12` (exact match)

✓h: 48px → `h-12` (exact match)

✓bg: #ccd6e0 → `bg-slate-300` (exact match)

✓layoutMode: VERTICAL → `flex flex-col`

✓gap: 4px → `gap-1` (exact match)

✓fontSize: 16px → `text-base` (exact match)

≈text: #1c242e → `text-zinc-800` (nearest palette)

✓fontSize: 14px → `text-sm` (exact match)

≈text: #737d8c → `text-slate-500` (nearest palette)

✓layoutMode: HORIZONTAL → `flex flex-row`

✓gap: 8px → `gap-2` (exact match)

✓layoutMode: HORIZONTAL → `flex flex-row`

✓pt: 4px → `pt-1` (exact match)

✓pr: 12px → `pr-3` (exact match)

✓pb: 4px → `pb-1` (exact match)

✓pl: 12px → `pl-3` (exact match)

≈bg: #dbf7e3 → `bg-green-100` (nearest palette)

✓cornerRadius: 9999 → `rounded-full`

✓fontSize: 12px → `text-xs` (exact match)

≈text: #21803d → `text-green-700` (nearest palette)

✓layoutMode: HORIZONTAL → `flex flex-row`

✓pt: 8px → `pt-2` (exact match)

✓pr: 16px → `pr-4` (exact match)

✓pb: 8px → `pb-2` (exact match)

✓pl: 16px → `pl-4` (exact match)

✓bg: #2663eb → `bg-blue-600` (exact match)

✓cornerRadius: 8px → `rounded-lg` (exact match)

✓fontSize: 14px → `text-sm` (exact match)

✓text: #ffffff → `text-white` (exact match)