CSS UNITS
Convert between px, rem, em, and viewport units.
Pixels16pxbase value
Rem1rem16px / 16 = 1rem
Em1em16px / 16 = 1em
Viewport Width0.8333vw16px / 1920 * 100 = 0.8333vw
Viewport Height1.4815vh16px / 1080 * 100 = 1.4815vh
Percentage0.8333%16px / 1920 * 100 = 0.8333%
Rendered size16px4 x 4 Tailwind units
md: (min-width: 768px)
<640
Default (mobile)
640
sm
768
md
1024
lg
1280
xl
1536
2xl
calc(100% - 32px)
Quick:
Spacing
0.25rem4px
0.5rem8px
0.75rem12px
1rem16px
1.25rem20px
1.5rem24px
2rem32px
2.5rem40px
3rem48px
4rem64px
Font Sizes
xs0.75rem12px
sm0.875rem14px
base1rem16px
lg1.125rem18px
xl1.25rem20px
2xl1.5rem24px
3xl1.875rem30px
4xl2.25rem36px
5xl3rem48px
Breakpoints
sm640px
md768px
lg1024px
xl1280px
2xl1536px
Tailwind uses min-width breakpoints. Styles apply at the breakpoint and above.
Get Smarter About AI Dev
New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.
One email per weekReal code, not theoryFree forever