From 3c26541d74cf9071f798bc443be6e43094ddae1e Mon Sep 17 00:00:00 2001
From: Alaa Badran <me@alaabadran.com>
Date: Tue, 21 Oct 2025 12:03:20 +0300
Subject: [PATCH] Enhance documentation for text alignment utilities

Added examples for text alignment utilities in LTR and RTL contexts for `text-start` and `text-end` classes
---
 src/docs/text-align.mdx | 55 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/docs/text-align.mdx b/src/docs/text-align.mdx
index eae2a7127..5c0651424 100644
--- a/src/docs/text-align.mdx
+++ b/src/docs/text-align.mdx
@@ -127,6 +127,61 @@ Use the `text-justify` utility to justify the text of an element:
 
 </Figure>
 
+### Text alignment with Directions (LTR and RTL)
+
+Use the `text-start` utility to align text to the start of HTML element, regardless or the direction (LTR or RTL):
+
+<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-start">
+          EN text align start
+        </p>
+        <p className="text-start" dir="rtl" lang="ar">
+          نص عربي في بداية السطر
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-justify] -->
+<p class="text-start">So I started to walk into the water...</p>
+<p class="text-start" dir="rtl" lang="ar">هنا يبدأ النص...</p>
+```
+
+</Figure>
+
+and use the `text-end` utility to align text to the end of HTML element, regardless or the direction (LTR or RTL), 
+<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-end">
+          EN text align end
+        </p>
+        <p className="text-end" dir="rtl" lang="ar">
+          نص عربي في نهاية السطر
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-justify] -->
+<p class="text-end">So I started to walk into the water...</p>
+<p class="text-end" dir="rtl" lang="ar">هنا يبدأ النص...</p>
+```
+
+</Figure>
+
 ### Responsive design
 
 <ResponsiveDesign element="p" property="text-align" defaultClass="text-left" featuredClass="text-center" />