You can also watch the YouTube video: [React Native Tailwind CSS Installation with Nativewind](https://www.youtube.com/watch?v=8naJy1KZ_y0) I'll use "yarn" as package manager but you can use whatever you want. If you want to install and use yarn you can install with one command: ``` npm i -g yarn ``` Create a new application: ``` npx @react-native-community/cli@latest init RNTailwind ``` Once the installation done: ``` cd RNTailwind ``` Delete package-lock.json if you'll use "yarn" package manager. Use `yarn` command to generate `yarn-lock.json` file: ``` yarn ``` Start the app: ``` yarn start ``` Run app on android or iOs(I'll use android): ``` yarn android ``` 1. Install NativeWind You will need to install Nativewind and it's peer dependencies tailwindcss, react-native-reanimated and react-native-safe-area-context ``` yarn add nativewind tailwindcss react-native-reanimated react-native-safe-area-context ``` For Mac users run: ``` npx pod-install ``` 2. Setup Tailwind CSS Run `npx tailwindcss init` to create a tailwind.config.js file Add the paths to all of your component files in your tailwind.config.js file. ``` /** @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: [], }; ``` Create a `app` folder and create `globals.css` CSS file and add the Tailwind directives: ``` /* app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; ``` 3. Add the Babel preset: ```js // babel.config.js module.exports = { presets: ["module:@react-native/babel-preset", "nativewind/babel"], }; ``` 4. Modify your metro.config.js ```js // metro.config.js const { getDefaultConfig } = require("@react-native/metro-config"); const { withNativeWind } = require("nativewind/metro"); const config = getDefaultConfig(__dirname); module.exports = withNativeWind(config, { input: "./app/globals.css" }); ``` 5. Move your `App.tsx(jsx)` file to `app` folder and import your CSS file ```js import React from "react"; import { SafeAreaView, ScrollView, StatusBar, Text, useColorScheme, View, } from "react-native"; import "./globals.css"; const App = (): React.JSX.Element => { const isDarkMode = useColorScheme() === "dark"; const backgroundStyle = "bg-neutral-300 dark:bg-slate-900 h-full"; return ( Hello World! ); }; export default App; ``` If you get an error like: > package="com.th3rdwave.safeareacontext" found in source AndroidManifest.xml: C:\Users\Victus\Downloads\RNTailwind\node_modules\react-native-safe-area-context\android\src\main\AndroidManifest.xml Edit the AndroidManifest.xml in react-native-safe-area: ``` ``` If you get an error like this: > [cxx1429] Error When Building With Cmake Using Check this post: [React Native [cxx1429] Error When Building With Cmake Using Solution](https://zedline.io/casper/posts/react-native-cxx1429-error-when-building-with-cmake-using-solution) 7. TypeScript (optional) NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new `nativewind-env.d.ts` file and add a triple-slash directive referencing the types. Our Nativewind installation is done, now we can make a simple login screen to see how it's works. Edit `App.tsx`: ```tsx import React from "react"; import { SafeAreaView, ScrollView, StatusBar, useColorScheme, View, } from "react-native"; import SignIn from "./components/SignIn"; import "./globals.css"; const App = (): React.JSX.Element => { const isDarkMode = useColorScheme() === "dark"; const backgroundStyle = "bg-gray-50 dark:bg-gray-900 h-full"; return ( ); }; export default App; ``` Create `components` folder inside the `app` folder and create `SignIn` component: ```tsx import { Image, Text, TextInput, TouchableOpacity, View } from "react-native"; const SignIn = () => { return ( Logo

React Native Sign in to your account Your email Password Remember me Forgot password? Sign in Don't have an account yet?{" "} Sign up ); }; export default SignIn; ``` Thank you for reading my blog post I hope you found it useful.