text-xs through text-9xl — the complete type scale with matching line-heights. This family contains 13 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
text-xsfont-size: 0.75rem; line-height: 1rem;
text-smfont-size: 0.875rem; line-height: 1.25rem;
text-basefont-size: 1rem; line-height: 1.5rem;
text-lgfont-size: 1.125rem; line-height: 1.75rem;
text-xlfont-size: 1.25rem; line-height: 1.75rem;
text-2xlfont-size: 1.5rem; line-height: 2rem;
text-3xlfont-size: 1.875rem; line-height: 2.25rem;
text-4xlfont-size: 2.25rem; line-height: 2.5rem;
text-5xlfont-size: 3rem; line-height: 1;
text-6xlfont-size: 3.75rem; line-height: 1;
text-7xlfont-size: 4.5rem; line-height: 1;
text-8xlfont-size: 6rem; line-height: 1;
text-9xlfont-size: 8rem; line-height: 1;

Example#

example
html
<h1 class="text-4xl md:text-6xl font-bold">Fluid headline</h1>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Body: text-base (16px); small print: text-sm/xs
  • Headline ladder: 4xl → 6xl across breakpoints

Common mistakes#

  • Stacking text-* utilities (text-red-500 + text-xl are both text-* — order matters, keep one of each kind)

colors/index|Text color · utilities/typography/font-size|Font size