Tailwind CSS Text size

Use responsive text size styles with TW elements. Learn how to change the text size easily and quickly.

Basic example

Use the following .text-{size} utility classes from Tailwind to set the font size for any text element.

.text-9xl

.text-8xl

.text-7xl

.text-6xl

.text-5xl

.text-4xl

.text-3xl

.text-2xl

.text-xl

.text-lg

.text-base

.text-sm

.text-xs

HTML

        
            
        <p class="text-9xl">.text-9xl</p>
        <p class="text-8xl">.text-8xl</p>
        <p class="text-7xl">.text-7xl</p>
        <p class="text-6xl">.text-6xl</p>
        <p class="text-5xl">.text-5xl</p>
        <p class="text-4xl">.text-4xl</p>
        <p class="text-3xl">.text-3xl</p>
        <p class="text-2xl">.text-2xl</p>
        <p class="text-xl">.text-xl</p>
        <p class="text-lg">.text-lg</p>
        <p class="text-base">.text-base</p>
        <p class="text-sm">.text-sm</p>
        <p class="text-xs">.text-xs</p>

Text size

Tailwind CSS Text size

Basic example

Access restricted

To view this section you must have an active PRO account

Text size

Tailwind CSS Text size

Basic example

Related resources