Tailwind CSS - Text Alignment

Previous
Quiz
Next

Tailwind CSS Text Alignment is a collection of predefined classes that make it easy to adjust text alignment within HTML elements based on our choice.

Tailwind CSS Text Alignment Classes

Below is a list of Tailwind CSS Text Alignment classes with properties that control the alignment of the text.

Class CSS Properties
text-left text-align: left;
text-center text-align: center;
text-right text-align: right;
text-justify text-align: justify;
text-start text-align: start;
text-end text-align: end;

Functionality Of Tailwind CSS Text Alignment Classes

  • text-left: This class aligns text to the left within its container.
  • text-center: This class centers text horizontally within its container. .
  • text-right: This class aligns text to the right within its container.
  • text-justify: This class evenly spaces words across each line of text.
  • text-start: This class aligns text to the end of its container based on the language direction.
  • text-end: This class aligns text to the end of its container based on the language direction.

Tailwind CSS Text Alignment Class Examples

Below are examples of Tailwind CSS Text Alignment classes that show how text alignment can be controlled within elements.

Aligning Text Left and Right

This example shows how to align text to the left and right using Tailwind CSS utility classes.

Example

 
<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>  
    <div class="max-w-md border border-gray-300 p-4">
      <p class="text-left mb-2">
        <strong>Left-aligned text:</strong> 
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
      </p>
      <p class="text-right">
        <strong>Right-aligned text:</strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
      </p>
    </div>
</body>

</html>

Horizontally Centered Text

This example shows how the text-center class in Tailwind CSS can be used to horizontally center text within its container.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="max-w-md p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>   
    <p class="text-center border border-gray-300 ">
        <strong>Centered Text:</strong><br>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.<br>
        Practicing gratitude helps shift our focus 
        from what we lack to what we have.
    </p>
</body>

</html>

Creating Evenly Spaced Text Lines

This example shows how the text-justify class in Tailwind CSS can be used to create evenly spaced text lines, creating justified content within its container.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="max-w-md p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Alignment
    </h1>   
    <p class="text-justify border border-gray-300 p-4">
        <strong>Justified Text:</strong><br>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment. Practicing 
        gratitude helps shift our focus from what we 
        lack to what we have.
    </p>
</body>

</html>

Start and End Alingment on Text

This example shows how to align text based on language direction , using the text-start and text-end classes in Tailwind CSS.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS  Text Alignment
    </h1> 
    <div class="max-w-md border-2 border-gray-300 p-4">
    <p class="text-start mb-4">
        <strong>Start-aligned text: </strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
    </p>
    <p class="text-end">
        <strong>End-aligned text:</strong>
        Having a sense of purpose or meaning in life 
        gives us direction and fulfillment.
    </p>
    </div>
</body>

</html>
Print Page
Previous
Next