font-size

Utilities for controlling the font size of an element.

Basic example

Use text-fluid-[breakpoints] utility to set the font size of an element.

text-fluid-[12px,16px]

This is a paragraph with a font size of 12px to 16px

text-fluid-[14px,18px]

This is a paragraph with a font size of 14px to 18px

text-fluid-[16px,20px]

This is a paragraph with a font size of 16px to 20px

text-fluid-[18px,22px]

This is a paragraph with a font size of 18px to 22px

text-fluid-[20px,24px]

This is a paragraph with a font size of 20px to 24px

text-fluid-[22px,26px]

This is a paragraph with a font size of 22px to 26px

text-fluid-[24px,28px]

This is a paragraph with a font size of 24px to 28px

JSX

<p className="text-fluid-[12px,16px]">This is a paragraph with a font size of 12px to 16px</p>
<p className="text-fluid-[14px,18px]">This is a paragraph with a font size of 14px to 18px</p>
<p className="text-fluid-[16px,20px]">This is a paragraph with a font size of 16px to 20px</p>
<p className="text-fluid-[18px,22px]">This is a paragraph with a font size of 18px to 22px</p>
<p className="text-fluid-[20px,24px]">This is a paragraph with a font size of 20px to 24px</p>
<p className="text-fluid-[22px,26px]">This is a paragraph with a font size of 22px to 26px</p>
<p className="text-fluid-[24px,28px]">This is a paragraph with a font size of 24px to 28px</p>

font-size

Basic example

Follow us