In this article, we will understand how to create a horizontal rule (HR) divider that contains text with Tailwind CSS. The problem here is that in an HR, there is no text, & only a divider is visible, and there is no default method to add text in Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework that provides a collection of pre-built utility classes.

The approach which can be used here is using the Utility classes of the Tailwind CSS, especially flexbox container and flex options. The utility classes, which cover everything from spacing and typography to colors and flexbox, enable quick creation by applying specified styles directly in the HTML markup. Without having to start from scratch when developing custom CSS, Tailwind CSS allows you to swiftly construct intricate layouts and styles.

Approach: Here, we are using the utility classes provided by Tailwind CSS. Starting with adding the “flex-grow” class to the <hr> tag. After that sandwich a <span> element between two <hr> tags with class as mentioned before. After this, the whole configuration that is the <hr> tags and the <span> tags are enclosed inside a <div> with class “flex” as flex-items.

Prerequisite: Tailwind CSS Flex Grow, Tailwind CSS Flex

Syntax:

<div class="flex items-center">
    <hr class="flex-grow">
    <span class="">Enter your text here</span>
    <hr class="flex-grow">
</div>

Tailwind CSS Utility Classes

• flex: This class is used to set an element’s display to flex or a div into a flexbox.
• flex-grow: This class enables an element to take all the space given to it and doesn’t restrict the growth of the flexbox with respect to the space available.

Example 1: The code below demonstrates how we can use the method given above to create a horizontal rule that contains the text.

Output:

Example 2: The code example demonstrates how we can add multiple HR dividers with text on the same HTML page and give different colors to them.

Output: