Text alignment in Tailwind - Browser Rendering Trace

Render Flow - Text alignment

Read HTML element with text

↓

Parse Tailwind class for text alignment

↓

Match class to CSS text-align property

↓

Apply text-align style to element

↓

Calculate line box positions

↓

Paint aligned text

↓

Composite final pixels

The browser reads the HTML and Tailwind classes, converts the text alignment class into CSS, applies it to the element, then positions and paints the text accordingly.

Render Steps - 3 Steps

Code Added:<div>Hello, this text is left aligned.</div>

Before

[div]
|Hello, this text is left aligned.
|______________________________

→

After

[div]
|Hello, this text is left aligned.
|______________________________

Initial text inside a div is left aligned by default.

🔧 Browser Action:Creates DOM node and paints default left-aligned text

Code Sample

This code centers the text horizontally inside the div.

Tailwind

<div class="text-center">
  Hello, this text is centered.
</div>

Tailwind

.text-center {
  text-align: center;
}

Render Quiz - 3 Questions

After applying step 2 with class="text-center", how is the text positioned inside the div?

A Text is centered horizontally

B Text is aligned to the left

C Text is aligned to the right

D Text is justified

Common Confusions - 2 Topics

Why doesn't text-center center the div itself?

text-center only aligns the text inside the element horizontally. It does not move or center the element itself.

💡 Text alignment affects text inside, not the element's position.

Why doesn't text-right work on inline elements like <span>?

Inline elements only take up as much width as their content, so right alignment has no visible effect unless the element is block or inline-block with width.

💡 Use block or inline-block elements to see text alignment effects.

Property Reference

Property	Tailwind Class	Visual Effect	Common Use
text-align	text-left	Aligns text to the left edge	Default alignment for most text
text-align	text-center	Centers text horizontally	Headings, buttons, centered content
text-align	text-right	Aligns text to the right edge	Dates, numbers, right-to-left languages
text-align	text-justify	Justifies text to fill the line width	Paragraphs for neat edges

Concept Snapshot

Text alignment controls horizontal position of text inside an element. Tailwind classes: text-left (default), text-center, text-right, text-justify. Works best on block or inline-block elements. Does not move the element itself, only the text inside. Triggers reflow and repaint when changed.