Tailwind CSS Text and Font: A Quick Overview

Tailwind CSS offers an elaborate set of classes for styling typography. This article will explain how to use these classes to manipulate font attributes, text color, decoration, and positioning.

We'll also cover how to use configure your own custom font for your project and as a bonus, show you how to make a text gradient with Tailwind CSS. Let's go!

Font Family, Size, Style, and Weight with Tailwind CSS

Tailwind provides a comprehensive set of classes for manipulating font characteristics. These classes are divided into four categories: font family, font size, font style, and font weight.

Font Family

You can specify the font family in Tailwind using the font- class. By default, Tailwind includes a sans-serif, serif, and monospace font family. For instance, to apply a sans-serif font, you would write:

<p class="font-sans">Hello, Tailwind CSS!</p>

Use a custom font

To add a custom font in Tailwind CSS, you need to first extend your Tailwind configuration file. Follow these steps:

1. Download your custom font files. These are usually .ttf files.
2. Place your custom font file somewhere in your assets or public folder (it has to be publicly accessible).
3. Add a @font-face rule in your tailwind.css file. Make sure the weight corresponds with the weight of the font, and the url relative to the css file.

@font-face {
    font-family: Inter;
    font-weight: 400;
    src: url("./Inter-Font.ttf") format("ttf");
}

4. Extend your Tailwind configuration file to include the new font. For example:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                custom: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },
}

5. Now, you can use your custom font using the font-custom class:

<p class="font-custom">Hello, Tailscan!</p>

Font Size

Tailwind uses a text-{size} prefix followed by a size to determine the font size. The size value can be one of the following:

Applying some these classes to any element will give the following results:

You can also use arbitrary values to give text a specific size, for example text-[14px]. Or change the line height by using any value of the line-height class, for example text-sm/loose or text-[20px]/7.

Font Weight

Font weight is managed using the font-{weight} prefix followed by the desired weight. For instance, to apply a font weight of 700 (bold), you would write font-bold:

<p class="font-bold">Hello, Tailscan!</p>

Results in: Hello, Tailscan!

The following font weights are available:

You can also use an arbitrary value by using font-[weight], for example font-[1100].

Font Style

Font style for Tailwind CSS simply refers to two classes: italic and not-italic. These classes are used to apply or remove italics from text.

<p class="italic">Hello, Tailscan!</p>

Results in: Hello, Tailscan!

Text color, decoration and transforming with Tailwind CSS

Tailwind CSS also provides classes for managing text color, decoration, and transforming text.

Text Colors

To specify text color, use the text- prefix followed by the color and shade. For example text-amber-500:

<p class="text-amber-500">This is amber 500</p>

Results in: This is amber 500

Click the link below to view all Tailwind colors you can apply to text.

You can also use the text-current class to set the text color to the current color of the element or text-transparent to make the text transparent.

Text Decoration

Tailwind provides classes for underlining (underline), line-through, overline and no-underline:

<span class="underline">Underline</span>
<span class="line-through">Line-through</span>
<span class="overline">Overline</span>

Results in: Underline   Line-through   Overline

Thickness can be controlled with the classes decoration-0, decoration-1 (1 pixel), decoration-2 (2 pixel), decoration-4 (4 pixel), decoration-8 (8 pixel), decoration-auto and decoration-from-font.

Text decoration colors

You can also apply color to text decorations using the decoration- prefix followed by the color and shade. For example decoration-amber-500:

<p class="decoration-amber-500 underline">This has an amber 500 underline</p>

Results in: This has an amber 500 underline

Click the link below to view all Tailwind colors you can apply to text decorations.

Text transforming

There are also classes in Tailwind to transform text easily: uppercase, lowercase, capitalize and normal-case.

<p>
    <span class="uppercase">uppercase</span>, 
    <span class="lowercase">LOWERCASE</span>, 
    <span class="capitalize">capitalize</span>, 
    <span class="normal-case">nOrMal-cAsE</span>
</p>

Results in: uppercase, LOWERCASE, capitalize, normal-case

Text positioning and behavior in Tailwind CSS

Tailwind provides classes for controlling text alignment, overflow, indentation, whitespace, and word breaks as well! Below is a quick overview of these classes.

Text Align

To align text, use the text- prefix followed by left, center, right, justify, start or end. For instance:

<p class="text-center">This is center aligned text</p>

Results in: This is center aligned text

text-start and text-end are used to align text based on the text direction of the element.

For example, in English, the start of an element is the left side, and the end is the right side (LTR - left-to-right). In Arabic, the start of an element is the right side, and the end is the left side (RTL).

Text Overflow

Tailwind provides the truncate and text-ellipsis and text-clip classes to handle text overflow:

<p class="overflow-ellipsis overflow-hidden">This is text with an ellipsis</p>
<p class="overflow-clip overflow-hidden">This is text that will be clipped</p>
<p class="truncate">This is truncated text</p>

Results in:

This is text with an ellipsis

This is text that will be clipped

This is truncated text

Text Indent

For indenting text, you can use the indent- utility followed by a size, where one unit is equal to 0.25rem or 4 pixels. For example, to indent text by 1rem, you would use the class indent-4:

<p class="indent-32">This is indented text</p>

Results in: This is indented text

Text Whitespace and Word Break

To control whitespace and word breaks, you can use the whitespace- and break- utility classes.

The whitespace utility is used to control how whitespace within an element is handled. The available classes are:

• whitespace-normal - This collapses white space and is the standard behavior.
• whitespace-nowrap - This prevents text from wrapping to a new line, forcing it to stay on a single line.
• whitespace-pre - This preserves white space as it is, including line breaks and spaces.
• whitespace-pre-line - This preserves line breaks, but collapses white space.
• whitespace-pre-wrap - This preserves white space as it is but allows text wrapping.
• whitespace-break-spaces - This preserves line breaks and white space.

The word break utility is used to control how words are broken within an element. The available classes are:

• break-normal - This breaks words at the end of a line.
• break-words - This breaks words at the end of a line if they are too long to fit.
• break-all - This breaks words at any point if they are too long to fit.
• break-keep - This keeps words together at the end of a line.

Line Clamp and Line Height

Tailwind CSS provides a set of classes for controlling line clamp and line height.

The line-clamp utility is used to limit the display of text to a specific number of lines. The available classes are line-clamp-1 to line-clamp-6 and line-clamp-none

The leading utility is used to set the line height. The available classes include:

Bonus: Text Gradients

You can also give text a gradient through Tailwind CSS variables and background-clip. Here's an example:

<p class="bg-gradient-to-r from-yellow-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
    This is a gradient text
</p>

This will render a text with a gradient from yellow, through red, to pink:

This is a gradient text

Final Thoughts

As you can see, text and font utility classes in Tailwind CSS make styling text a breeze.

Check out all the Tailwind CSS text and font classes here: Tailwind CSS Typography classes.

Want to experiment with all the things you've just learned? Try out Tailscan below 👇 and change some apply some classes on this page!

Tailscan can help you style typography (or anything, really) by immediately giving visual feedback. This will make your development process more efficient and enjoyable, allowing you to spend more time on other things!