Published on

Tailwind CSS text size classes

Authors
  • avatar
    Name
    hwahyeon
    Twitter

Confusion keeps arising, so the Tailwind CSS text size classes are being organized here.

Class NameSize (rem)Size (px)
text-xs0.75rem12px
text-sm0.875rem14px
text-base1rem16px
text-lg1.125rem18px
text-xl1.25rem20px
text-2xl1.5rem24px
text-3xl1.875rem30px
text-4xl2.25rem36px
text-5xl3rem48px
text-6xl3.75rem60px
text-7xl4.5rem72px
text-8xl6rem96px
text-9xl8rem128px

Custom Sizes:

Tailwind CSS also supports custom text sizes with the format text-[size].

For example:

  • text-[10px] — 10px
  • text-[1.25rem] — 1.25rem (20px)

Reference

Tailwind CSS Font Size Documentation

Discuss on Twitter • View on GitHub