Skip to content

Instantly share code, notes, and snippets.

@celly
Created April 14, 2022 14:05
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 celly/72d465e32533737f1338ee78385adb6e to your computer and use it in GitHub Desktop.
Save celly/72d465e32533737f1338ee78385adb6e to your computer and use it in GitHub Desktop.
Tailwind Font Cheat-Sheet
text-xs font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
font-thin font-weight: 100;
font-extralight font-weight: 200;
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;
leading-3 line-height: .75rem; /* 12px */
leading-4 line-height: 1rem; /* 16px */
leading-5 line-height: 1.25rem; /* 20px */
leading-6 line-height: 1.5rem; /* 24px */
leading-7 line-height: 1.75rem; /* 28px */
leading-8 line-height: 2rem; /* 32px */
leading-9 line-height: 2.25rem; /* 36px */
leading-10 line-height: 2.5rem; /* 40px */
leading-none line-height: 1;
leading-tight line-height: 1.25;
leading-snug line-height: 1.375;
leading-normal line-height: 1.5;
leading-relaxed line-height: 1.625;
leading-loose line-height: 2;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment