Setting Up Tailwind in React Native SDK 51 with NativeWind

When installing the new React Native 51 SDK and Looking to write you code using Tailwind, I'm not going to waste your time let's start by:

Looking at the folder Structure first!

Step 2

index.tsx

Then now you are one step forward, now will be adding a simple code for the "/app/(tabs)/index.tsx".

/// <reference types="nativewind/types" />

Then now this error should have been fixed!

Step 3

In your "/app/_layout.tsx" you must make sure you have this code:

/** @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: [],

};



copy! the code and replace the one you have.

Step 5

Here we will be adding the most important part of the "Nativewind" to work with React Native/Expo: Our "babel.config.js"

`const { getDefaultConfig } = require("expo/metro-config");

const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./app/global.css" });`

The end

Happy Coding