From 41cf8e149266abf6f9fefb9dc074e8799695d0c6 Mon Sep 17 00:00:00 2001
From: abdalkaderdev <abdalkaderdealhamoud@gmail.com>
Date: Thu, 8 Oct 2026 03:51:22 +0300
Subject: [PATCH] fix: map text-align start/end to left/right

parseTextAlign only allowed auto/left/right/center/justify, so the
text-start and text-end utilities Tailwind v4 emits as text-align:
start/end were dropped with a warning and no alignment was applied.

React Native has no logical start/end for textAlign, but <Text>
resolves left/right against the writing direction, so they are already
the logical values and the mapping can be done at compile time with no
runtime change. <TextInput> treats them as physical, which is a
separate React Native issue (facebook/react-native#45255).

Closes #454
---
 src/__tests__/vendor/tailwind/typography.test.tsx | 10 ++++++++++
 src/compiler/declarations.ts                      | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/__tests__/vendor/tailwind/typography.test.tsx b/src/__tests__/vendor/tailwind/typography.test.tsx
index 00d184b7..ef8de294 100644
--- a/src/__tests__/vendor/tailwind/typography.test.tsx
+++ b/src/__tests__/vendor/tailwind/typography.test.tsx
@@ -282,6 +282,16 @@ describe("Typography - Text Align", () => {
       props: { style: { textAlign: "justify" } },
     });
   });
+  test("text-start", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { textAlign: "left" } },
+    });
+  });
+  test("text-end", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { textAlign: "right" } },
+    });
+  });
 });
 
 describe("Typography - Text Color", () => {
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 9ca2aab8..ec762310 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -2446,6 +2446,16 @@ export function parseTextAlign(
   { value }: DeclarationType<"text-align">,
   builder: StylesheetBuilder,
 ) {
+  // React Native has no logical `start`/`end` for textAlign. On <Text> it
+  // resolves `left`/`right` against the writing direction, so they already
+  // behave as the logical values and the mapping can happen at compile time.
+  // <TextInput> treats them as physical: facebook/react-native#45255
+  if (value === "start") {
+    return "left";
+  } else if (value === "end") {
+    return "right";
+  }
+
   const allowed = new Set(["auto", "left", "right", "center", "justify"]);
   if (allowed.has(value)) {
     return value;