DEV Community

Raymond
Raymond

Posted on

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!
Image description

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

Image description

Step 2

index.tsx

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

Image description

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

Image description
`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

Image description

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

Image description

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:

Image description

`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

Top comments (0)