Tailwind CSS Text-align
The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element.
Tailwind Text align
The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element. With Tailwind's text-align class, you can easily align text to the left, center, right, or justify it.
Applying Text Align
To apply the text alignment to an element, you can use the text-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:
- text-left: Aligns the text to the left.
- text-center: Centers the text horizontally.
- text-right: Aligns the text to the right.
- text-justify: Justifies the text, spreading it evenly across the container.
Text-center
<div class="text-center"> In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.</div>Preview
In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.
Text-right
<div class="text-right"> In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.</div>Preview
In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.
Text-left
<div class="text-left"> In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.</div>Preview
In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.
Text-justify
<div class="text-justify"> In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.</div>Preview
In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.
Responsive Text Align
Tailwind CSS allows you to apply text alignment classes responsively at different breakpoints. To use responsive text alignment classes, you can append the breakpoint prefix to the utility class. For example, md:text-right aligns the text to the right starting from the medium breakpoint and above.
<div class="text-left md:text-right"> <!-- Text content here --></div>In the above example, the text is aligned to the left by default (text-left), but starting from the medium breakpoint and above, the text alignment is changed to the right (md:text-right).
Tailwind Text Align Class Table
| Class | Properties |
|---|---|
| text-left | text-align: left; |
| text-center | text-align: center; |
| text-right | text-align: right; |
| text-justify | text-align: justify; |
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
