Setting Up Tailwind in React Native SDK 51 with NativeWind

Introduction

This guide provides a streamlined setup to integrate Tailwind CSS in your new React Native SDK 51 project. Follow each step closely, and let’s get your project styled in no time.

Folder Structure

Begin by reviewing your project’s folder structure. In the "app" folder, you’ll need to add some new files for Tailwind to work properly.

Step 1: Create a Global CSS File

Create a global.css file inside the "app" folder and add any global styling you may need here.

css
/* app/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;``

Step 2: Configure the Main Index Component

In /app/(tabs)/index.tsx, add the following base code:

import React from 'react';
import { Text, View } from 'react-native';
export default function Index() {
return (
<View className="flex-1 items-center justify-center bg-white">
<Text className="text-lg font-bold">Hello, Tailwind!</Text>
</View>
);
}

This file will help you set up Tailwind classes, but initially, you may encounter an error for the className attribute.

Step 3: Fix className Error with NativeWind Types

To resolve the className error, create a nativewind-env.d.ts file with a reference to NativeWind types:

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

This extends React Native types to support Tailwind.

Step 4: Update _layout.tsx for Global CSS

In /app/_layout.tsx, add the following code to import your global CSS:

import { Slot } from "expo-router";
import "../app/global.css";
export default Slot;

Ensure that this is properly set up to apply global styling throughout your project.

Step 5: Configure tailwind.config.js

Replace the content of tailwind.config.js with the following code, ensuring that the paths to all component files are included:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
};

Step 6: Configure babel.config.js

Add the necessary configurations for NativeWind in babel.config.js:

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

Step 7: Configure metro.config.js

Finally, if you don’t have a metro.config.js file, create one and add the following code:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./app/global.css" });

This ensures Tailwind CSS compatibility with Expo and NativeWind.

Conclusion

You’re all set! Tailwind CSS is now integrated into your React Native SDK 51 project. Happy coding, and enjoy building with Tailwind's powerful styling capabilities!