graphql
react

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

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

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

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

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

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

ClassProperties
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;

Windframe Tailwind blocks

Landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner