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!

In Your file structure we need to add a few files for it to work, Inside the "app" create a global.css file then add:

Step 1

global.css

Step 2

index.tsx

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

Now upon adding this code, you will encounter an error for the className, here you will need to add a file nativewind-env.d.ts

Note: 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.

inside the file:

/// <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:

`import { Slot } from "expo-router";

// Import your global CSS file
import "../app/global.css";

export default Slot;`

Step 4

Then now you will have to update your tailwind.config.js

/** @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"

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

make sure you have this code as it here.

Step 6

the final part to make Tailwind work, is "metro.config.js" if you don't have this file please create it then you added this code:

`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