Font Size

Defines the font size of an element.

ClassProperties
text-xsfont-size: .75rem;
text-smfont-size: .875rem;
text-basefont-size: 1rem;
text-lgfont-size: 1.125rem;
text-xlfont-size: 1.25rem;
text-2xlfont-size: 1.5rem;
text-3xlfont-size: 1.75rem;
text-4xlfont-size: 2rem;
text-5xlfont-size: 2.5rem;
text-6xlfont-size: 3rem;
text-7xlfont-size: 4rem;
text-8xlfont-size: 6rem;

text-xs

Lorem ipsum dolor sit amet

text-sm

Lorem ipsum dolor sit amet

text-base

Lorem ipsum dolor sit amet

text-lg

Lorem ipsum dolor sit amet

text-xl

Lorem ipsum dolor sit amet

text-2xl

Lorem ipsum dolor sit amet

text-3xl

Lorem ipsum dolor sit amet

text-4xl

Lorem ipsum dolor sit amet

text-5xl

Lorem ipsum dolor sit amet

text-6xl

Lorem ipsum dolor sit amet

text-7xl

Lorem ipsum dolor sit amet

text-8xl

Lorem ipsum dolor sit amet

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-xs</p>
        <p class="text-xs w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-sm</p>
        <p class="text-sm w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-base</p>
        <p class="text-base w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-lg</p>
        <p class="text-lg w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-xl</p>
        <p class="text-xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-2xl</p>
        <p class="text-2xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-3xl</p>
        <p class="text-3xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-4xl</p>
        <p class="text-4xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-5xl</p>
        <p class="text-5xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-6xl</p>
        <p class="text-6xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-7xl</p>
        <p class="text-7xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="flex align-items-center border-bottom-1 surface-border surface-overlay w-full">
        <p class="w-2 text-left font-bold text-blue-500 mr-3">text-8xl</p>
        <p class="text-8xl w-10">Lorem ipsum dolor sit amet</p>
    </div>
</div>
 

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:text-lg to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors

Lorem ipsum dolor sit amet

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="surface-overlay border-round border-1 w-16rem min-h-full p-3 m-3 flex align-items-center">
        <p class="text-lg md:text-6xl m-0">Lorem ipsum dolor sit amet</p>
    </div>
</div>