Getting started
Compatibility
What AstraWind needs, and how web features map to React Native.
Requirements
0.78 or newer. Tested on 0.86 with Expo SDK 57.
The New Architecture, for boxShadow, filter, gradients, display: contents and blend modes. Other utilities work on either.
Its theme is built in; tailwindcss isn't needed at runtime. This release matches Tailwind 4.3.3.
How web features map to native
Text styles set on a View (text-sm text-zinc-500) apply to the text inside it, as in CSS.
Follows colorScheme on the provider ("light", "dark" or "system").
sm:, max-md:, min-[600px]:
Window width. portrait:/landscape: use the window's orientation.
Containers measure their width with onLayout; queries match from the next frame.
Press, hover (pointer devices) and focus state.
Named or unnamed; a peer can be any sibling.
Matches data-*, aria-*, checked, disabled and icons among the children written in JSX.
first:, last:, odd:, nth-*, divide-*, *:
The parent tells each child its position.
Emulated with wrapping flex rows sized after the first layout.
transition-*, duration-*, ease-*, delay-*
Animates color, opacity, transform and size changes; respects the OS "reduce motion" setting.
animate-spin, -pulse, -ping, -bounce
Native-driver animations.
shadow-*, ring-*, inset-shadow-*
A dropShadow filter on Android; a layer shadow on iOS.
React Native's single text shadow (layers combined).
bg-linear-*, bg-radial, from-*/via-*/to-*
experimental_backgroundImage gradients.
placeholder:, selection:, [&_svg]:
placeholderTextColor, selectionColor, and default icon size and color.
ios:, android:, web:, native:
Platform variants (AstraWind additions).
Limitations
Parent-provided features (first:/last:/nth-*, divide-*, grid columns, *: and peer-*) need the parent to be an AstraWind component.
has-* only sees children written in JSX, not elements rendered inside other components.
Grids support equal-width columns and column spans. Explicit rows, placement and templates like grid-cols-[1fr_auto] fall back to a single column.
Transitions run in JavaScript, don't animate box shadows, and don't animate text color inherited from a parent.
React Native implements most filter functions on Android only.
Conic gradients have no native equivalent.
ch is approximated as half an em.
These have no native equivalent and are accepted without effect: before:/after: and other pseudo-elements, masks, backdrop filters, scroll snapping and scroll margins, floats, tables, columns, order, zoom, z-axis translation and scale, cursor-* and browser-only states. In development, AstraWind warns once for each class in your code that it can't apply; set warnUnsupported on the provider to change this.