Tailwind Font Size and Weight to CSS
Convert Tailwind typography classes like text-lg, text-2xl, font-bold, font-semibold to CSS. See the exact font-size, line-height, and font-weight values.
Typography
Detailed Explanation
Tailwind Typography: Font Size and Weight
Tailwind's typography utilities map directly to CSS font-size, line-height, and font-weight properties. Each text size class sets both the font size and a matching line height for optimal readability.
Font Size Scale
/* 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 */
/* text-3xl */
font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
/* text-4xl */
font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
Font Weight
/* 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;
Line Height Override
When you need a different line height than the default pairing, Tailwind provides leading-* classes: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2).
Use Case
Designers implementing a type scale who need to verify the exact CSS values behind Tailwind's text-* classes, or developers setting up a CSS stylesheet that matches an existing Tailwind design system.