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 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