v0.2.0

System

Getting started

Installation

Add AstraWind to an Expo or React Native app and style it with Tailwind classes.

Installing AstraWind

AstraWind is Tailwind CSS for React Native. You write className the way you would on the web, and it resolves each class to native styles at runtime, using Tailwind's own theme values. There's no Babel plugin, no Metro transformer and no CSS file to compile.

Install the package

Add it to an Expo or React Native app:

Terminal

npx expo install @astrawind/css

Tailwind's theme is built in, so tailwindcss isn't needed at runtime. This release matches Tailwind 4.3.3.

Add the provider

Wrap your app in AstraWindProvider. It works without a theme; pass one to add your own tokens or dark mode values. TextRoot sets text styles for everything below it, like styles on <body>.

app/_layout.tsx

import { AstraWindProvider, TextRoot } from "@astrawind/css"

export default function App() {
  return (
    <AstraWindProvider colorScheme="system">
      <TextRoot className="text-base text-zinc-900 dark:text-zinc-100">
        <Main />
      </TextRoot>
    </AstraWindProvider>
  )
}

Start using Tailwind in your components

Import the className-ready components from @astrawind/css and style them with Tailwind's utility classes:

components/save-card.tsx

import { Pressable, Text, View } from "@astrawind/css"

export function SaveCard() {
  return (
    <View className="flex-row items-center gap-3 rounded-xl bg-white p-4 shadow-md dark:bg-zinc-900">
      <Text className="text-lg font-semibold text-zinc-900 dark:text-white">Hello</Text>
      <Pressable className="ml-auto rounded-lg bg-indigo-600 px-4 py-2 transition active:scale-95 active:bg-indigo-700">
        <Text className="font-medium text-white">Save</Text>
      </Pressable>
    </View>
  )
}

These components accept className:

View, Text, Pressable, TouchableOpacity, TextInput, Image, ImageBackground, KeyboardAvoidingView, ActivityIndicator and Switch.

ScrollView, FlatList and SectionList, which also take contentContainerClassName (and columnWrapperClassName on FlatList).

Tip: Any other component can take className with styled(). See Adding custom styles.

Editor setup →