Uniwind 1.3.0 Pro: subtree-scoped rtl: support
When in Arabic interfaces, it's not rare when you have an English UI but the data you are receiving on a request is in Arabic and vice versa.
We always need to support subtrees with a different direction.
That works perfectly in Tailwind on the web. React Native also supports this using a direction CSS style:
<View style={{ direction: "rtl" }}>But seems like Uniwind is using a global value for the rtl: variant.
That’s really needed for Arabic interfaces instead of using:
Repro
// App direction is LTR (I18nManager.isRTL === false)
<View style={{ direction: "rtl" }}>
{/* Yoga: flips correctly — S/E markers swap, ps-* moves to the right edge */}
<View className="flex-row ps-10">…</View>
{/* Uniwind: stays blue — rtl: doesn't see the subtree direction */}
<View className="bg-blue-500 rtl:bg-red-500" />
</View>Seems like this is doable in uniwind, having group etc support.
And I think it's great pro feature for the library.
PS:
Tailwind v4 web:
rtl: variant compiles to &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)
That’s an ancestor selector — the nearest dir attribute wins, so a dir="rtl" subtree flips its rtl: classes while the rest of the page stays LTR. Subtree-scoped by design.
Uniwind 1.3.0 Pro: subtree-scoped
rtl:supportWhen in Arabic interfaces, it's not rare when you have an English UI but the data you are receiving on a request is in Arabic and vice versa.
We always need to support subtrees with a different direction.
That works perfectly in Tailwind on the web. React Native also supports this using a direction CSS style:
But seems like Uniwind is using a global value for the
rtl:variant.That’s really needed for Arabic interfaces instead of using:
Repro
Seems like this is doable in uniwind, having group etc support.
And I think it's great pro feature for the library.
PS:
Tailwind v4 web:
rtl: variant compiles to &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)
That’s an ancestor selector — the nearest dir attribute wins, so a dir="rtl" subtree flips its rtl: classes while the rest of the page stays LTR. Subtree-scoped by design.