Tailwind CSS Text Align
The text-align utility in Tailwind CSS is used to control the horizontal alignment of text within its parent element. It offers various options to set the text alignment including left, center, right, justify, and other options.
Syntax
The syntax for the text-align utility in Tailwind CSS is:
<div class="text-{alignment}">
...
</div>
Here, {alignment} defines the desired alignment of the text within the parent element.
Example
Let's take a look at an example to understand the usage of Tailwind CSS text-align utility.
<div class="text-left">Aligned to left</div>
<div class="text-center">Aligned to center</div>
<div class="text-right">Aligned to right</div>
<div class="text-justify">Justified Text Justified Text Justified Text Justified Text Justified Text Justified Text Justified Text Justified Text</div>
Output
The output of the above example would be as follows:
Explanation
The text-align utility in Tailwind CSS sets the horizontal alignment of text within its container element. It offers five different options for alignment - left, center, right, justify, and initial.
text-left- This class sets the text alignment to left.text-center- This class sets the text alignment to center.text-right- This class sets the text alignment to right.text-justify- This class sets the text alignment to justify.
Use
The text-align utility in Tailwind CSS is used to control the horizontal alignment of text within its parent element.
Important Points
The
text-alignutility in Tailwind CSS sets the horizontal alignment of text within its container element.It offers five different options for alignment - left, center, right, justify, and initial.
The
text-justifyoption is used to align text in justified (evenly-distributed) format.
Summary
The text-align utility in Tailwind CSS is a helpful utility for aligning text horizontally within its container element. It allows for left, center, right, justify, and initial alignment options to be used to achieve the desired alignment.