Setting Up Tailwind in React Native SDK 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!

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:

///

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

The above is the detailed content of Setting Up Tailwind in React Native SDK with NativeWind. For more information, please follow other related articles on the PHP Chinese website!