Assuming you have set 16px font-size in your project base, following will be the conversion table with examples:
General Size Conversion For height, width, max-height, margin, padding, and space between
| Pixels | Tailwind (class examples) |
REM |
|---|---|---|
| 0px | 0 (w-0, h-0) | 0rem |
| 1px | (w-px, h-px) | 0.0625rem |
| 2px | 0.5 (w-0.5, h-0.5) | 0.125rem |
| 4px | 1 (h-1, max-h-1) | 0.25rem |
| 6px | 1.5 (h-1.5) | 0.375rem |
| 8px | 2 (h-2) | 0.5rem |
| 10px | 2.5 (h-2.5) | 0.625rem |
| 12px | 3 (h-3) | 0.75rem |
| 14px | 3.5 (h-3.5) | 0.875rem |
| 16px | 4 (h-4) | 1rem |
| 20px | 5 (h-5) | 1.25rem |
| 24px | 6 (h-6) | 1.5rem |
| 28px | 7 (h-7) | 1.75rem |
| 32px | 8 (h-8) | 2rem |
| 36px | 9 (h-9) | 2.25rem |
| 40px | 10 (h-10) | 2.5rem |
| 44px | 11 (h-11) | 2.75rem |
| 48px | 12 (h-12) | 3rem |
| 56px | 14 (h-14) | 3.5rem |
| 64px | 14 (h-16) | 4rem |
| 80px | 16 (h-20) | 5rem |
| 96px | 24 (h-24) | 6rem |
| 112px | 28 (h-28) | 7rem |
| 128px | 32 (h-32) | 8rem |
| 144px | 36 (h-36) | 9rem |
| 160px | 40 (h-40) | 10rem |
| 176px | 44 (h-44) | 11rem |
| 192px | 48 (h-48) | 12rem |
| 208px | 52 (h-52) | 13rem |
| 224px | 56 (h-56) | 14rem |
| 240px | 60 (h-60) | 15rem |
| 256px | 64 (h-64) | 16rem |
| 288px | 72 (h-72) | 18rem |
| 320px | 80 (h-80) | 20rem |
| 384px | 96 (h-96) | 24rem |
Font Size Conversion
| Pixels | Tailwind Utility Class | REM |
|---|---|---|
| 12px | text-xs | 0.75rem |
| 14px | text-sm | 0.875rem |
| 16px | text-base | 1rem |
| 18px | text-lg | 1.125rem |
| 20px | text-xl | 1.25rem |
| 24px | text-2xl | 1.5rem |
| 30px | text-3xl | 1.875rem |
| 36px | text-4xl | 2.25rem |
| 48px | text-5xl | 3rem |
| 60px | text-6xl | 3.75rem |
| 72px | text-7xl | 4.5rem |
| 96px | text-8xl | 6rem |
| 128px | text-9xl | 8rem |
Note that older tailwind versions will not have all of these utility classes.