Defines the font size of an element.
| 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; |
<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.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<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>