⌘ K
esc

    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">
        <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>
    </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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container">
            <div class="surface-overlay 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>
    </div>