Text align controls horizontal alignment of inline content inside a block.
When to use
Centered headings, right-aligned numbers in tables, and justified prose (use sparingly on the web).
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Centered hero
text-center max-w-2xl mx-autotext-center on a capped, centered block, short lines stay readable; avoid centering long paragraphs.
Tabular numbers
text-right tabular-numsRight-align numbers in tables so digits line up. tabular-nums keeps column width stable.
Summary
- text-align positions inline content (text, images, inline-flex) within its block container, not the block itself.
- Center headings and short UI copy; keep long paragraphs left-aligned (start) for reading comfort.
- justify stretches lines to fill width except the last line. Use sparingly; it creates uneven word spacing in short blocks.
- For flex/grid child alignment, use justify-content or justify-items. text-align only affects inline content inside the child.
- Tailwind: text-left, text-center, text-right, text-start, text-end. Prefer logical start/end for RTL support.