NativeWind V4 не працює з ReactNative, TypeScript та Expo

Слідуйте наступним крокам, щоб виправити проблему

Встановіть NativeWind

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Створіть файл конфігурації TailWind

npx tailwindcss init  

# Вставте вміст нижче до файлу конфігурації  
/** @type {import('tailwindcss').Config} */  
module.exports = {  
 // ЗАУВАЖЕННЯ: Оновіть цей шлях до всіх ваших компонентів.  
 content: ["./app/**/*.{js,jsx,ts,tsx}"],  
 presets: [require("nativewind/preset")],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
}

Створіть файл global.css у корені вашої папки

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

Створіть файл babel.config.js та додайте наступну конфігурацію

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

Змініть ваш metro.config.js​

Якщо у вашому проекті немає файлу metro.config.js, виконайте команду npx expo customize 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" });

Імпортуйте файл Global.css у файл app/_layout.tsx

import "../global.css";

Створіть файл app.d.ts у корені вашої папки з проектом і вставте наступний вміст

/// 

Не забудьте перезавантажити сервер після внесених змін

Будь ласка, натисніть лайк і підпишіться, щоб отримувати більше такого контенту 🙂

Перекладено з: NativeWind V4 Not working with ReactNative, TypeScript and Expo