tailwind css text align example

In this tutorial we will see how to use text align in tailwind css. Also we will see responsive text align, text align start end center example with Tailwind CSS.


Examples

tailwind css text align start, end, center, justify left, right.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Text Alignment Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="text-left">So I started to walk into the water...</p>
    <p class="text-center">So I started to walk into the water...</p>
    <p class="text-right">So I started to walk into the water...</p>
    <p class="text-justify">So I started to walk into the water...</p>
    <p class="text-start">So I started to walk into the water...</p>
    <p class="text-end">So I started to walk into the water...</p>
  </body>
</html>
tailwind css text align start, end, center, justify left, right.

tailwind css text align start, end, center, justify left, right.


tailwind css text align with hover.

<p class="text-left hover:text-center">
  tailwind css hover text alignment 
</p>


tailwind css responsive text align.

<p class="text-left md:text-center">
    tailwind css responsive text alignment
</p>


Read Also

Tailwind CSS Text Color Example

Tailwind CSS Text Decoration Example

Tailwind CSS Text Decoration Color Example

Tailwind CSS Text Decoration Style Example

How to Use Text Underline Offset in Tailwind CSS

How to Use Text Decoration Thickness in Tailwind CSS