Setting Up NativeWind in React Native

If you want to enhance your React Native Expo project with a powerful styling solution, NativeWind is an excellent choice. NativeWind allows you to use Tailwind CSS classes in your React Native components, making it easier to manage styles and maintain consistency across your application. This article will walk you through the steps to set up NativeWind in your React Native Expo project.

Table of Contents

1. Introduction to NativeWind
2. Prerequisites
3. Setting Up a New Expo Project
4. Installing NativeWind
5. Configuring TailwindCSS
6. Using NativeWind in Your Project
7. Example Usage
8. Conclusion

Introduction to NativeWind

NativeWind brings the utility-first CSS framework, Tailwind CSS, to the React Native world. Integrating NativeWind allows you to apply Tailwind-style classes directly to your React Native components, simplifying the styling process and making your codebase cleaner.

Prerequisites

Before you start, ensure you have the following installed on your system:

Node.js (version 12 or higher)
npm or yarn
Expo CLI

Setting Up a New Expo Project

If you don't already have an Expo project, you can create one by running:

npx create-expo-app MyNativeWindApp
cd MyNativeWindApp

Installing NativeWind

To install NativeWind and its peer dependencies, run the following commands:

npm install nativewind && npm install -D tailwindcss@3.3.2

Configuring TailwindCSS

Next, you need to configure TailwindCSS in your project. Create a tailwind.config.js file in the root of your project:

// tailwind.config.js
module.exports = {
+ content: ['./App.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you’re going to be writing Tailwind styles in other directories, be sure to include them in the content array.
Finally, add the Babel plugin for NativeWind to babel.config.js:

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

Using NativeWind in Your Project

Now, you can start using NativeWind in your React Native components.

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
    <SafeAreaView className={"flex-1 items-center justify-center bg-neutral-900"}>
    <StatusBar style="light" />
        <Text className="text-red-500 font-bold">They not like us</Text>
    </SafeAreaView>
}

the visuals

Conclusion
Setting up NativeWind in your React Native project allows you to leverage the power of Tailwind CSS for styling your mobile application. By following the steps outlined in this guide, you can quickly integrate NativeWind and start using utility-first CSS classes in your React Native components.