Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
How to use
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.