NativeWind: Tailwind CSS dla React Native – kompletny przewodnik | Deployance

NativeWind to biblioteka stylowania, która przenosi podejście utility-first znane z Tailwind CSS do React Native. Zamiast pisać obiekty StyleSheet i ręcznie definiować style dla każdego komponentu, używasz klas Tailwind przez prop className. Ten sam sposób myślenia, który znasz z webu — flex-1, px-4, text-center — działa na iOS, Androidzie i w webie. W tym przewodniku wyjaśniam, czym jest NativeWind, jak go skonfigurować w Expo i React Native CLI, jak działa pod spodem, jakie ma ograniczenia oraz czym różnią się wersje v4 i v5.

Czym jest NativeWind?

NativeWind to biblioteka stylowania, a nie biblioteka komponentów. Jej zadaniem jest tłumaczenie klas Tailwind CSS na style zrozumiałe dla React Native. Podczas budowania aplikacji NativeWind przetwarza Twoje klasy przez kompilator Tailwind, a następnie konwertuje wynikowy CSS na obiekty StyleSheet.create dla platform natywnych lub pozostawia jako className dla webu.

Innymi słowy:

Na webie NativeWind przekazuje className do CSS StyleSheet, czyli korzysta z natywnego silnika przeglądarki.
Na iOS i Androidzie React Native nie ma silnika CSS, więc NativeWind kompiluje style do obiektów StyleSheet.create i aplikuje je przez minimalny runtime.

Dzięki temu możesz współdzielić komponenty między platformami i zachować spójny język projektowania. To szczególnie cenne, jeśli Twój zespół zna Tailwind CSS z projektów webowych i chce uniknąć przełączania kontekstu przy pracy nad aplikacją mobilną.

NativeWind nie jest zamiennikiem React Native ani biblioteką UI. To warstwa stylowania, która współpracuje z istniejącymi komponentami React Native oraz z bibliotekami takimi jak React Native Reusables, NativewindUI czy gluestack.

Dlaczego warto używać NativeWind w React Native?

React Native domyślnie oferuje StyleSheet.create, który zapewnia wyłącznie style statyczne. Nie ma w nim pseudoklas, media queries, dziedziczenia stylów ani zmiennych CSS. NativeWind uzupełnia te braki i dodaje szereg funkcji, które na webie są standardem.

Główne korzyści:

Spójny system stylowania — te same klasy i tokeny designu działają na webie i w aplikacji mobilnej.
Szybsza iteracja — stylujesz bezpośrednio w JSX, bez tworzenia osobnych arkuszy stylów.
Kompilacja w czasie budowania — style są generowane z wyprzedzeniem, więc runtime jest lekki.
Wsparcie dla dark mode — wariant dark: działa podobnie jak w Tailwind CSS.
Pseudoklasy — hover:, focus:, active: na komponentach, które obsługują odpowiednie zdarzenia.
Zmienne CSS i motywy — dynamiczne motywy przez vars() i useColorScheme.
Warianty platformowe — ios:, android:, web: i native: pozwalają dostosować style bez Platform.select.
Integracja z ekosystemem — biblioteki takie jak NativewindUI, React Native Reusables i gluestack są zbudowane z myślą o NativeWind.

Jeśli znasz Tailwind CSS, krzywa wejścia jest niewielka. Jeśli nie znasz, inwestycja w naukę utility-first zwraca się przy pracy nad wieloma platformami i większymi projektami.

Jak działa NativeWind?

Zrozumienie mechanizmu działania pomaga uniknąć typowych błędów konfiguracyjnych.

Kompilacja w czasie budowania

NativeWind korzysta z kompilatora Tailwind CSS. Klasy, które pojawiają się w Twoim kodzie, są skanowane i zamieniane na style. Na platformach natywnych trafiają do NativeWindStyleSheet.create, czyli lekkiego wrappera wokół StyleSheet.create. Dzięki temu statyczne style są cache’owane i współdzielone.

Style dynamiczne i tematy

NativeWind obsługuje model subskrypcji tematów. Style mogą subskrybować właściwości takie jak szerokość ekranu, motyw kolorystyczny czy orientacja urządzenia. Gdy wartość się zmienia, style są ponownie ewaluowane. To pozwala obsłużyć media queries, dynamiczne jednostki i zmiany schematu kolorów bez ręcznego re-renderowania całego drzewa komponentów.

Web a natywne platformy

Na webie NativeWind działa jak nakładka na Tailwind CSS i przekazuje klasy do przeglądarki. Na natywnych platformach React Native nie ma CSS, więc NativeWind konwertuje reguły na obiekty stylów. Część właściwości CSS nie ma odpowiednika w React Native — na przykład grid działa tylko w webie, ponieważ React Native obsługuje wyłącznie flexbox. W takich przypadkach możesz użyć wariantów platformowych, aby zastosować styl warunkowo.

Znaczenie `global.css`, Babel i Metro

W wersji v4 NativeWind wykorzystuje transformację jsxImportSource oraz plugin Babel. Metro odpowiada za przetwarzanie pliku global.css i integrację z bundlerem. Od wersji v5 konfiguracja przechodzi na model CSS-first z Tailwind CSS v4, a Babel i Metro są upraszczane. Szczegóły różnic opisuję w sekcji poświęconej wersjom.

Instalacja i konfiguracja NativeWind

Poniżej znajdziesz praktyczny przewodnik dla Expo oraz dla React Native CLI. Zakładam, że masz już utworzony projekt.

Konfiguracja w Expo (NativeWind v4, Tailwind CSS v3)

To najczęstszy scenariusz produkcyjny na dziś. Wersja v4 jest stabilna i szeroko stosowana.

Krok 1. Instalacja zależności

npx expo install nativewind
npx expo install --dev tailwindcss@^3.4.17

Jeśli używasz animacji lub Reanimated, zainstaluj również react-native-reanimated i react-native-safe-area-context. Nie są one wymagane do samego stylowania, ale wiele projektów ich potrzebuje.

Krok 2. Inicjalizacja Tailwind CSS

npx tailwindcss init

Następnie uzupełnij tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

Kluczowy element to presets: [require("nativewind/preset")]. Bez niego warianty platformowe i funkcje specyficzne dla NativeWind nie będą działać. Upewnij się też, że ścieżki w content obejmują wszystkie pliki, w których używasz klas.

Krok 3. Plik global.css

Utwórz global.css w katalogu głównym projektu:

@tailwind base;
@tailwind components;
@tailwind utilities;

Zaimportuj go raz, najlepiej w głównym pliku layoutu, np. app/_layout.tsx:

import "../global.css";

Bez tego importu style nie zostaną zastosowane. To jeden z najczęstszych błędów konfiguracyjnych.

Krok 4. Konfiguracja Babel

W pliku babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Jeśli używasz Reanimated, dodaj plugin react-native-worklets/plugin lub react-native-reanimated/plugin zgodnie z dokumentacją Reanimated.

Krok 5. Konfiguracja Metro

W metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

Krok 6. TypeScript

Jeśli używasz TypeScript, utwórz nativewind-env.d.ts:

/// <reference types="nativewind/types" />

Upewnij się, że plik jest uwzględniony w tsconfig.json w sekcji include.

Krok 7. app.json

Dla webu ustaw bundler Metro:

{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

Krok 8. Restart Metro

Po zmianie konfiguracji Babel i Metro uruchom ponownie serwer z czyszczeniem cache:

npx expo start --clear

Konfiguracja w React Native CLI

Dla projektów bez Expo kroki są podobne, ale zamiast expo install używasz npm install. Pamiętaj o poprawnym skonfigurowaniu Metro i Babel zgodnie z dokumentacją NativeWind dla Twojej wersji React Native. W projektach CLI często trzeba też jawnie zainstalować babel-preset-react-native lub odpowiedni preset.

Typowe problemy konfiguracyjne

Style nie działają — sprawdź import global.css, ścieżki w content i czy Metro zostało zrestartowane z --clear.
Błąd Cannot find module 'babel-preset-expo' — w projektach Expo bez własnego babel.config.js preset może być zagnieżdżony w node_modules/expo. Po utworzeniu własnego configu zainstaluj go na najwyższym poziomie: npx expo install babel-preset-expo -- --save-dev.
Konflikty wersji — nie kopiuj konfiguracji z nieaktualnych poradników. Sprawdź zgodność wersji NativeWind, Expo SDK, React Native i Tailwind CSS.
TypeScript nie rozpoznaje className — upewnij się, że nativewind-env.d.ts istnieje i jest w include w tsconfig.json.

Podstawowe użycie: className w praktyce

Po konfiguracji możesz stylować komponenty React Native tak jak na webie.

import { View, Text, Pressable } from "react-native";

export default function WelcomeScreen() {
  return (
    <View className="flex-1 items-center justify-center bg-white px-6 dark:bg-gray-900">
      <Text className="text-2xl font-bold text-gray-900 dark:text-white">
        Witaj w NativeWind
      </Text>
      <Text className="mt-2 text-base text-gray-600 dark:text-gray-300">
        Stylowanie utility-first dla React Native
      </Text>
      <Pressable className="mt-6 rounded-lg bg-blue-500 px-6 py-3 active:bg-blue-600">
        <Text className="font-semibold text-white">Rozpocznij</Text>
      </Pressable>
    </View>
  );
}

Kilka zasad, które warto zapamiętać:

Zawsze deklaruj oba warianty trybu jasnego i ciemnego. React Native nie ma kaskady CSS, więc dark:text-white bez text-gray-900 może pozostawić tekst bez koloru w trybie jasnym.
Prop style ma pierwszeństwo przed className. Jeśli łączysz oba, pamiętaj, że style inline nadpisują klasy.
Warunkowe klasy łącz za pomocą szablonów lub bibliotek takich jak clsx, tailwind-variants czy cva.

Przykład komponentu z wariantami:

import { Text } from "react-native";

const VARIANT_CLASSES = {
  info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
  success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
  error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
} as const;

type BadgeProps = {
  label: string;
  variant?: keyof typeof VARIANT_CLASSES;
  className?: string;
};

export function Badge({ label, variant = "info", className }: BadgeProps) {
  return (
    <Text
      className={`rounded-full px-2 py-1 text-xs font-medium ${VARIANT_CLASSES[variant]} ${className ?? ""}`}
    >
      {label}
    </Text>
  );
}

W przypadku własnych komponentów nie używaj cssInterop ani remapProps. Przyjmij prop className i połącz go z klasami domyślnymi. Te funkcje są przeznaczone wyłącznie dla komponentów zewnętrznych.

Dark mode, motywy i zmienne CSS

NativeWind obsługuje dark mode poprzez wariant dark: oraz hook useColorScheme z pakietu nativewind.

import { useColorScheme } from "nativewind";
import { View, Text, Pressable } from "react-native";

export function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <View className="flex-1 items-center justify-center bg-white dark:bg-gray-900">
      <Text className="text-lg text-gray-900 dark:text-white">
        Aktualny motyw: {colorScheme}
      </Text>
      <Pressable
        className="mt-4 rounded-md bg-gray-200 px-4 py-2 dark:bg-gray-700"
        onPress={toggleColorScheme}
      >
        <Text className="text-gray-900 dark:text-white">Zmień motyw</Text>
      </Pressable>
    </View>
  );
}

W aplikacjach Expo ustaw userInterfaceStyle: "automatic" w app.json, aby systemowy tryb ciemny był wykrywany poprawnie.

Zmienne CSS i `vars()`

Do dynamicznego motywowania użyj vars(). Zwraca obiekt stylu, który ustawia zmienne CSS w drzewie komponentów.

import { vars } from "nativewind";
import { View, Text } from "react-native";

const brandTheme = vars({
  "--color-primary": "#3b82f6",
  "--color-surface": "#f8fafc",
  "--color-primary-text": "#ffffff",
});

export function ThemedScreen() {
  return (
    <View style={brandTheme} className="flex-1 bg-[--color-surface] p-6">
      <Text className="text-lg font-bold text-[--color-primary]">
        Treść w motywie marki
      </Text>
    </View>
  );
}

Zmienne dziedziczą się przez drzewo komponentów, podobnie jak w CSS. Do odczytu wartości w JavaScript użyj useUnstableNativeVariable, choć API może się zmienić w przyszłych wersjach.

Dobre praktyki motywowania

Definiuj tokeny w jednym miejscu, np. w tailwind.config.js lub przez vars().
Nie mieszaj zbyt wielu źródeł prawdy o kolorach.
Dla motywów zależnych od trybu jasnego i ciemnego łącz vars() z useColorScheme.
Pamiętaj, że 8-cyfrowe kolory hex z kanałem alfa mogą być problematyczne w niektórych konfiguracjach HSL. Sprawdź dokumentację swojej wersji.

Responsywność, warianty platformowe i pseudoklasy

NativeWind obsługuje warianty platformowe, które zastępują Platform.select w stylowaniu.

<View className="p-4 ios:pt-12 android:pt-8">
  <Text className="text-base ios:font-semibold android:font-bold">
    Tekst zależny od platformy
  </Text>
  <View className="ios:shadow-lg android:elevation-4 rounded-lg bg-white p-4">
    <Text className="text-gray-900">Karta z cieniem platformowym</Text>
  </View>
</View>

Dostępne prefiksy:

ios: — tylko iOS,
android: — tylko Android,
web: — tylko web,
native: — wszystkie platformy natywne poza webem,
tv: — tvOS.

Pseudoklasy

NativeWind mapuje pseudoklasy na zdarzenia React Native:

Pseudoklasa	Modyfikator	Zdarzenie aktywacji	Zdarzenie dezaktywacji
`:hover`	`hover:`	`onHoverIn`	`onHoverOut`
`:active`	`active:`	`onPressIn`	`onPressOut`
`:focus`	`focus:`	`onFocus`	`onBlur`

Komponent musi obsługiwać odpowiednie zdarzenie. Na przykład hover: działa na Pressable i TextInput, ale nie na View ani Text.

Dostępne są też disabled:, empty:, selection: i placeholder:. Grupowanie przez group i group/{nazwa} pozwala stylować dzieci na podstawie stanu rodzica.

<Pressable className="group rounded-lg bg-gray-100 p-4">
  <Text className="text-gray-500 group-hover:text-blue-500">
    Najedź lub naciśnij
  </Text>
</Pressable>

Responsywność

Domyślne breakpointy Tailwind są zaprojektowane pod web (640 px, 768 px, 1024 px). W aplikacjach mobilnych często lepiej dostosować je do rozmiarów urządzeń lub użyć obliczeń opartych na Dimensions. Nie zakładaj, że md: będzie działać tak samo jak w przeglądarce.

Zaawansowane funkcje NativeWind

Animacje i przejścia

NativeWind obsługuje klasy animacji Tailwind, takie jak animate-spin, animate-pulse czy animate-bounce, a pod spodem korzysta z React Native Reanimated. Przejścia (transition-*) działają eksperymentalnie na platformach natywnych. Nie wszystkie właściwości są obsługiwane — na przykład przejścia cienia są dostępne tylko w webie.

<View className="h-8 w-8 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />

Do bardziej złożonych animacji używaj bezpośrednio Reanimated. NativeWind sprawdza się w prostych przypadkach, ale nie zastępuje pełnego API animacji.

Container queries i custom CSS

NativeWind v4+ obsługuje container queries, czyli reagowanie na rozmiar kontenera rodzica, a nie tylko ekranu. Wsparcie jest częściowe — container-type i style-based container queries nie są obsługiwane. Możesz też pisać własne klasy w pliku CSS i używać ich w komponentach.

Komponenty zewnętrzne: `remapProps` i `cssInterop`

Niektóre komponenty zewnętrzne nie przekazują className do rdzenia React Native. Do integracji służą dwie funkcje:

remapProps — lekka funkcja mapująca className na istniejące propsy stylu, np. style, contentContainerStyle w FlatList. Nie ma narzutu runtime.
cssInterop — pełny runtime, który wyodrębnia atrybuty stylu do pojedynczych propsów. Używaj tylko wtedy, gdy komponent wymaga takiego mapowania, np. placeholderTextColor w TextInput. Ma koszt wydajności.

import { remapProps, cssInterop } from "nativewind";
import { FlatList, TextInput } from "react-native";

remapProps(FlatList, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
  columnWrapperClassName: "columnWrapperStyle",
});

cssInterop(TextInput, {
  className: {
    target: "style",
    nativeStyleToProp: { textAlign: true },
  },
  placeholderClassName: {
    target: false,
    nativeStyleToProp: { color: "placeholderTextColor" },
  },
});

Nie używaj tych funkcji do własnych komponentów. Własne komponenty powinny po prostu przyjmować className i łączyć go z klasami domyślnymi.

NativeWind v4 vs NativeWind v5

Wersja v4 jest stabilna i oparta na Tailwind CSS v3. Wersja v5 jest release candidate i targetuje Tailwind CSS v4 oraz nowszą architekturę React Native.

Aspekt	NativeWind v4	NativeWind v5
Tailwind CSS	v3.4	v4.1+
Konfiguracja motywu	`tailwind.config.js`	CSS-first, `@theme`
Babel	`nativewind/babel` + `jsxImportSource`	Usunięty z Babel; import rewrite
Metro	`withNativeWind(config, { input })`	`withNativewind(config)` bez drugiego argumentu
PostCSS	Nie wymagany	Wymagany `postcss.config.mjs`
`cssInterop` / `remapProps`	Dostępne	Deprecjonowane na rzecz `styled()`
`vars()`	Dostępne	Nadal dostępne, ale preferowany `VariableContextProvider`
React Native	Szerokie wsparcie	Wymaga RN 0.81+, New Architecture, Reanimated v4+
Status	Stabilny, produkcyjny	Release candidate

Migracja z wersji v4 do v5

Najważniejsze kroki:

Zaktualizuj zależności: nativewind@5, react-native-css, tailwindcss@4, @tailwindcss/postcss, lightningcss.
Zmień global.css na nowe dyrektywy Tailwind v4: @import "tailwindcss"; i @import "nativewind/theme";.
Usuń NativeWind z babel.config.js, pozostaw babel-preset-expo.
Utwórz postcss.config.mjs.
Zaktualizuj metro.config.js do withNativewind(config).
Przypnij wersję lightningcss, aby uniknąć błędów deserializacji.
Wyczyść cache i uruchom ponownie Metro.

W wersji v5 zmieniają się też nazwy niektórych klas, np. elevation-sm na elevation-xs, a elevation na elevation-sm. Animacje przechodzą z własnego silnika na Reanimated CSS. Szczegóły znajdziesz w oficjalnym przewodniku migracji.

Jeśli budujesz projekt produkcyjny obecnie, bezpiecznym wyborem jest wersja v4. Wersję v5 warto śledzić i testować w projektach niekrytycznych, do momentu aż zostanie ogłoszona jako stabilna.

UI kit i ekosystem

NativeWind to biblioteka stylowania, ale wokół niej rozwinął się ekosystem komponentów:

NativewindUI — komponenty nastawione na natywny wygląd iOS i Androida.
React Native Reusables — otwarta biblioteka inspirowana shadcn/ui, którą kopiujesz i dostosowujesz do projektu.
gluestack — rozbudowany zestaw komponentów cross-platform od twórców NativeBase.

Wszystkie trzy korzystają z klas Tailwind i mogą przyspieszyć budowę interfejsu, jeśli chcesz pozostać w podejściu utility-first.

Rozwiązywanie typowych problemów

Style nie są aplikowane, brak komunikatu ostrzeżenia

Sprawdź, czy używasz className, a nie class.
Upewnij się, że global.css jest zaimportowany w głównym pliku.
Zweryfikuj ścieżki w content w tailwind.config.js.
Wyczyść cache Metro i uruchom ponownie serwer.

TypeScript zgłasza błąd na prop className

Dodaj nativewind-env.d.ts z referencją do typów.
Sprawdź, czy plik jest w include w tsconfig.json.

Błąd Cannot find module 'babel-preset-expo'

Zainstaluj preset na najwyższym poziomie: npx expo install babel-preset-expo -- --save-dev.

Style działają w trybie jasnym, ale nie w ciemnym

Upewnij się, że deklarujesz oba warianty, np. text-black dark:text-white.
W Expo ustaw userInterfaceStyle: "automatic" w app.json.

Konflikty wersji po aktualizacji

Sprawdź zgodność NativeWind, Expo SDK, React Native i Tailwind CSS.
Nie kopiuj konfiguracji z poradników dla starszych wersji.
Po zmianie Babel lub Metro zawsze uruchamiaj --clear.

Animacje nie działają na Androidzie

Część przypadków anulowania animacji w Reanimated jest znana i zależy od wersji.
Przetestuj na urządzeniu lub emulatorze i sprawdź issues w repozytorium Reanimated.

Najlepsze praktyki i wydajność

Nie nadużywaj dynamicznych klas inline. Częste zmiany className mogą powodować więcej pracy runtime niż statyczne klasy.
Ekstrahuj powtarzalne style do komponentów. Zamiast powielać długie listy klas, twórz komponenty z domyślnymi klasami i propem className.
Używaj remapProps zamiast cssInterop, gdy to możliwe. remapProps nie ma narzutu runtime.
Nie używaj cssInterop do własnych komponentów. To częsty błąd prowadzący do niepotrzebnego narzutu.
Pamiętaj o różnicach rem. NativeWind używa 14 px na natywnych platformach i 16 px w webie. W theme podawaj wartości w px, aby zachować spójność.
Testuj na obu platformach. Cienie, animacje i niektóre właściwości układu zachowują się inaczej na iOS i Androidzie.
Profiluj, jeśli zauważysz spadki wydajności. NativeWind ma mały runtime, ale złożone drzewa i dynamiczne motywy mogą wpływać na renderowanie.

FAQ

Czy NativeWind jest gotowy produkcyjnie?
Tak, wersja v4 jest stabilna i używana w wielu aplikacjach produkcyjnych. v5 jest release candidate i nie powinna być wybierana do krytycznych wdrożeń bez testów.

Czy NativeWind działa z Expo Go?
Tak, konfiguracja v4 działa w Expo Go i nie wymaga development builda dla samego stylowania. Niektóre zależności natywne, np. Reanimated w określonych wersjach, mogą wymagać dev clienta.

Czym różni się NativeWind od Tamagui?
NativeWind to warstwa stylowania oparta na Tailwind CSS. Tamagui to pełny system designu i biblioteka komponentów z własnymi tokenami i kompilatorem optymalizującym. Wybór zależy od tego, czy chcesz pozostać przy Tailwind, czy potrzebujesz gotowego systemu komponentów.

Czy mogę używać Tailwind CSS v4 z NativeWind v4?
Nie. NativeWind v4 korzysta z Tailwind CSS v3.4. Tailwind v4 jest wspierany przez NativeWind v5.

Jak stylować komponenty zewnętrzne?
Użyj remapProps dla komponentów z wieloma propsami stylu, np. FlatList. Użyj cssInterop tylko wtedy, gdy atrybut stylu musi zostać wyodrębniony do osobnego propa, np. placeholderTextColor.

Dlaczego moje style nie działają po instalacji?
Najczęstsze przyczyny to brak importu global.css, błędne ścieżki w content, brak nativewind/preset w tailwind.config.js lub nieodświeżony cache Metro. Sprawdź te cztery elementy w pierwszej kolejności.

Czy NativeWind zastępuje StyleSheet.create?
Nie zastępuje go całkowicie. NativeWind kompiluje klasy do obiektów StyleSheet.create, ale nadal możesz używać StyleSheet bezpośrednio, szczególnie w miejscach wymagających zerowego narzutu runtime.

Jakie są alternatywy dla NativeWind?
Uniwind (szybszy zamiennik z własnym silnikiem C++), Tamagui, styled-components oraz klasyczny StyleSheet.create. Wybór zależy od priorytetów: wydajność, znajomość Tailwind, gotowe komponenty czy minimalizm.

Podsumowanie

NativeWind wypełnia lukę między Tailwind CSS a React Native. Daje Ci utility-first, kompilację w czasie budowania, dark mode, zmienne CSS, warianty platformowe i pseudoklasy — wszystko w jednym spójnym systemie. Konfiguracja wymaga kilku plików i zrozumienia różnic między webem a natywnymi platformami, ale po jej poprawnym przeprowadzeniu stylowanie aplikacji staje się szybsze i bardziej przewidywalne.

Jeśli zaczynasz nowy projekt, rozważ stabilne v4 z Tailwind CSS v3. Jeśli eksperymentujesz lub planujesz migrację, śledź rozwój v5 i testuj ją w kontrolowanym zakresie. W obu przypadkach kluczowe jest poprawne skonfigurowanie tailwind.config.js, global.css, Babel i Metro oraz świadomość ograniczeń React Native względem CSS.

O autorze: Artykuł przygotowany przez zespół frontendowy specjalizujący się w React Native i systemach designu. Treść opiera się na dokumentacji NativeWind, Tailwind CSS oraz praktycznych wdrożeniach w projektach Expo i React Native CLI.

Umowa SLA – co to jest, elementy, rodzaje i wzór

Node.js Backend Development: Kompletny przewodnik

Natywne aplikacje Android – kompletny przewodnik

Flutter czy React Native? Kompletny przewodnik 2026