Text Align - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "text-align"; export const description = "Utilities for controlling the alignment of text.";

Examples

Left aligning text

Use the text-left utility to left align the text of an element:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0"> <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200"> <p className="text-left"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example>

html

<!-- [!code classes:text-left] -->
<p class="text-left">So I started to walk into the water...</p>

</Figure>

Right aligning text

Use the text-right utility to right align the text of an element:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0"> <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200"> <p className="text-right"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example>

html

<!-- [!code classes:text-right] -->
<p class="text-right">So I started to walk into the water...</p>

</Figure>

Centering text

Use the text-center utility to center the text of an element:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0"> <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200"> <p className="text-center"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example>

html

<!-- [!code classes:text-center] -->
<p class="text-center">So I started to walk into the water...</p>

</Figure>

Justifying text

Use the text-justify utility to justify the text of an element:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0"> <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200"> <p className="text-justify"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example>

html

<!-- [!code classes:text-justify] -->
<p class="text-justify">So I started to walk into the water...</p>

</Figure>

Using logical properties

Use the text-start and text-end utilities, which use logical properties to map to either the left or right side based on the text direction:

<Figure> <Example padding={false}> { <div className="px-4 sm:px-0" dir="rtl" lang="ar"> <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200"> <p className="text-end"> بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية. </p> </div> </div> } </Example>

html

<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:text-end] -->
<div dir="rtl" lang="ar">
  <p class="text-end">فبدأت بالسير نحو الماء...</p>
</div>

</Figure>

Responsive design