Skip to content

Instantly share code, notes, and snippets.

@johncarter-
Created February 3, 2021 08:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johncarter-/8726f95f4cd249890bef887af7c050bf to your computer and use it in GitHub Desktop.
Save johncarter-/8726f95f4cd249890bef887af7c050bf to your computer and use it in GitHub Desktop.
Tailwind CSS sizing in pixel (px)

When I receive designs they are often provided in px. Use this to convert those px values into Tailwind CSS sizes.

Text sizes

tailwind class rem px
.text-xs 0.75 12
.text-sm 0.875 14
.text-base 1 16
.text-lg 1.125 18
.text-xl 1.25 20
.text-2xl 1.5 24
.text-3xl 1.875 30
.text-4xl 2.25 36
.text-5xl 3 48
.text-6xl 3.75 60
.text-7xl 4.5 72
.text-8xl 6 96
.text-9xl 8 128
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment