Skip to content

text-start/text-end silently dropped — parseTextAlign rejects logical values #454

Description

@Noitidart

Describe the bug

The text-start and text-end utility classes from Tailwind CSS v4 are silently dropped. No alignment is applied — the builder emits a warning but no error.

Root cause

parseTextAlign in react-native-css/compiler/declarations.ts only allows ["auto", "left", "right", "center", "justify"]. Tailwind v4 generates text-align: start/end for text-start/text-end, which are rejected.

React Native does not accept "start"/"end" as textAlign values. However, per Expo's localization guide, RN's "left" already behaves as logical start on <Text> (flips to right in RTL), and "right" as logical end.

Proposed fix

Map at compile time in parseTextAlign:

if (value === "start") return "left";
if (value === "end") return "right";

No runtime changes needed — RN handles the RTL flipping natively on <Text>. (Note: <TextInput> treats left/right as physical values — see facebook/react-native#45255.)

Reproduction

Steps:

  1. npm install && npx expo run:ios
  2. Press "Force RTL" button
  3. Fully restart the app
  4. The text-start class should align the text right in RTL, but no alignment is applied

Expected behavior

text-start should apply textAlign: "left" (which RN treats as logical start, flipping to right in RTL on <Text>).

Workaround

Use patch-package with the patch from the fix branch.

Environment

  • react-native-css: 3.0.7
  • nativewind: 5.0.0-preview.4
  • react-native: 0.86.0
  • expo: 57

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions