expo-tailwind-setup
Tailwind CSS v4 w Expo — uniwersalne style dla iOS, Android i Web za pomocą NativeWind
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umożliwia szybkie skonfigurowanie Tailwind CSS v4 w projekcie Expo z użyciem react-native-css i NativeWind v5. Narzędzie automatyzuje integrację nowoczesnego CSS-first frameworku z React Native, obsługując jednocześnie web i aplikacje mobilne. Zawiera gotowe konfiguracje Metro i PostCSS, a także wsparcie dla zmiennych CSS i stylów platformowo-specyficznych. Idealne dla deweloperów chcących pisać uniwersalne style bez powtarzania kodu.
Jak używać
Zainstaluj wymagane pakiety poleceniem npm expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx — wszystkie zależności zostaną dodane do Twojego projektu Expo.
Dodaj resolucję dla lightningcss w pliku package.json, wstawiając sekcję resolutions z wersją lightningcss 1.30.1 — zapewni to kompatybilność z Expo, które domyślnie zawiera PostCSS.
Utwórz plik metro.config.js w głównym katalogu projektu i skonfiguruj go za pomocą getDefaultConfig z expo/metro-config oraz withNativewind z nativewind/metro — ustaw inlineVariables na false i globalClassNamePolyfill na false.
Stwórz plik postcss.config.mjs z pluginem @tailwindcss/postcss — to umożliwi przetwarzanie stylów Tailwind w Twoim projekcie.
Utwórz plik src/global.css i zaimportuj warstwy Tailwind: theme.css, preflight.css i utilities.css — możesz tam dodać również stylizacje platformowo-specyficzne dla Androida i iOS.
Zacznij używać klas Tailwind w komponentach React Native — NativeWind automatycznie przekształci je w style natywne dla każdej platformy.