dev-resources.site
for different kinds of informations.
React Native Expo with NativeWind v4 and Typescript
I'm writing this because I faced the problem recently. When I was wasting my time, the solution was right in front of me in documentation.
Steps
Create an expo app
npx create-expo-app@latest
this will create a template for your project.
NativeWind v4 installation
Step 1
Install nativewind in expo with necessary packages given in doc
npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
Step 2
then run
npx tailwindcss init
this will create an tailwind.config.js file.
and paste this, also find it in documentation of nativewind v4
/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}
Step 3
Now, create a global.css file in root directory.
Step 4
Update babel.config.js. If you are using expo which is below 50 then follow expo below 49 sdk
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};
Step 5
Create metro.config.js if not have, then add this below codes. This is for Expo SDK 50+ only. If you are using expo which is below 50 then follow expo below 49 sdk
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./global.css" });
Step 6
Create an nativewind-env.d.ts file and add
/// <reference types="nativewind/types" />
For the final step, import the global.css to the app/_laybout.tsx
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated";
import "../global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
</Stack>
);
}
Now, tailwindcss is working in your react native expo project with NativeWind v4.
import React from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView>
<Text className="text-blue-600 font-bold text-3xl ">
Creating app with expo
</Text>
</SafeAreaView>
);
};
export default App;
Working...
Note: All these are written in the Official documentation of NativeWind. I just wanted to keep them here, so that no newbie face the problem like me and waste their precious time.
Featured ones: