Font Size

Defines the font size of an element.

Classes
Class Properties
text-xs font-size: .75rem;
text-sm font-size: .875rem;
text-base font-size: 1rem;
text-lg font-size: 1.125rem;
text-xl font-size: 1.25rem;
text-2xl font-size: 1.5rem;
text-3xl font-size: 1.75rem;
text-4xl font-size: 2rem;
text-5xl font-size: 2.5rem;
text-6xl font-size: 3rem;
text-7xl font-size: 4rem;
text-8xl font-size: 6rem;
Examples

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="card flex flex-wrap align-items-center justify-content-center">
    <div class="flex align-items-center border-bottom-1 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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 border-blue-100 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

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.

  • 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="card flex flex-wrap align-items-center justify-content-center">
    <div class="surface-0 shadow-1 p-3 m-3 flex align-items-center" style="width: 250px; min-height: 200px">
        <p class="text-lg md:text-6xl">Lorem ipsum dolor sit amet</p>
    </div>
</div>