NativeWind - using Tailwind CSS in React Native

What is NativeWind?

NativeWind is a styling library for React Native that enables the use of Tailwind CSS in mobile applications. It acts as an interpreter of Tailwind classes, converting them to native React Native styles, allowing for faster and more intuitive component styling. By integrating with Tailwind CSS, NativeWind ensures style consistency across platforms and high performance, eliminating the need to manually define styles in StyleSheet objects.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-built classes, such as flex, pt-4 or text-center, that allow you to quickly style interfaces without writing custom CSS. It allows you to directly define the appearance in HTML or JSX, and supports the mobile-first approach and responsive design. This makes it easy to create consistent, scalable designs and is especially popular among web and mobile developers who want to prototype and build user interfaces quickly.

How to use NativeWind in React Native? – step by step

Step 1. Configure a new project in React Native

Before we start using Tailwind CSS in React Native, we need to prepare the project. There are two main methods to create a React Native application: using Expo or using the React Native CLI. Check out the detailed information on how to start a project in React Native?

Option 1: React Native CLI (full control).

If you want to access native modules, use the React Native CLI:

npx react-native init MyApp

cd MyApp

npx react-native run-android  # for Androida

npx react-native run-ios      # for iOS (only on macOS)

Option 2: Expo (simpler and faster)

Expo is a tool that makes it easy to develop React Native applications without having to set up a native environment. If you don’t have it yet, install the Expo CLI:

npm install -g expo-cli

Then create and launch a new project:

npx create-expo-app my-app

cd my-app

npx expo start

The app can be tested on a mobile device using Expo Go.

Step 2. Install NativeWind

To add NativeWind to your project, run the following command:

npm install nativewind

NativeWind also requires the configuration of Babel, in order to correctly interpret Tailwind CSS classes. Open the babel.config.js file and add the NativeWind plugin:

module.exports = function (api) {

  api.cache(true);

  return {

    presets: ["babel-preset-expo"],

    plugins: ["nativewind/babel"],

  };

};

With this configuration, NativeWind will be able to dynamically process Tailwind CSS classes in React Native code.

Need support with mobile projects?

Write to us!

Step 3. Configure Tailwind CSS

The next step is to install Tailwind CSS and create a configuration file:

npm install tailwindcss

npx tailwindcss init

After executing this command, a tailwind.config.js file will appear in the project directory. Open it and adjust the configuration by adding paths to the React Native component files:

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

This way Tailwind CSS will know which files to analyze and where to apply its classes.

Step 4. Configure Babel for NativeWind

In order for NativeWind to correctly interpret Tailwind CSS classes in React Native, it is necessary to configure Babel, which allows JavaScript code to be transformed before it is executed.

First, make sure you already have NativeWind installed in your project.Then open the babel.config.js file located in the root directory of your project and add the NativeWind plugin to it:

module.exports = function (api) {

  api.cache(true);

  return {

    presets: ["babel-preset-expo"],

    plugins: ["nativewind/babel"],

  };

};

What does this configuration do?

• api.cache(true) – optimizes Babel’s performance through the cache.
• presets: [“babel-preset-expo”] – provides support for code in Expo (if you use it).
• plugins: [“nativewind/babel”] – enables interpretation of Tailwind CSS classes in React Native.

Step 5. Create and style components using NativeWind

Once NativeWind is properly installed and Tailwind CSS is configured, we can move on to practical application. In this chapter, we will show you how to use Tailwind CSS classes in React Native components to quickly and effectively style the user interface.

Basic use of Tailwind classes in React Native

With NativeWind, we can apply Tailwind CSS classes directly in the className attribute of React Native components. Here is a simple example:

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

export default function App() {

  return (

    <View className="flex-1 justify-center items-center bg-blue-500">

      <Text className="text-white text-lg font-bold">Welcome in NativeWind!</Text>

    </View>

  );

}

What’s going on here?

• flex-1 – sets the parent component to full screen height.
• justify-center – aligns elements vertically in the center.
• items-center – aligns elements horizontally in the center.
• bg-blue-500 – sets the background color to blue.
• text-white – changes the text color to white.
• text-lg – sets a larger font size.
• font-bold – makes the text bold.

This makes the code more readable and concise, with all the style defined in one place.

Conditional Styling

NativeWind allows us to dynamically change styles based on the state of the component. We can use the conditional operator to give different classes depending on the value of a variable:

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

export default function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <View className={`flex-1 justify-center items-center ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
      <Text className={`text-lg ${darkMode ? 'text-white' : 'text-black'}`}>
        {darkMode ? 'Tryb ciemny' : 'Tryb jasny'}
      </Text>
      <TouchableOpacity 
        className="mt-4 px-4 py-2 bg-blue-500 rounded-lg"
        onPress={() => setDarkMode(!darkMode)}
      >
        <Text className="text-white font-bold">Change mode</Text>
      </TouchableOpacity>
    </View>
  );
}

How does it work?

• We use useState to keep track of the dark mode status.
• The background View changes color depending on the darkMode value.
• The text Text turns white in dark mode and black in light mode.
• TouchableOpacity works as a button to change the mode.

With NativeWind, we can dynamically manage styles in a simple and clear way.

Responsiveness support

NativeWind supports built-in responsive classes, which allows you to adapt the interface to different screen sizes:

<View className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 bg-green-500 p-4">

  <Text className="text-white text-center">Example block</Text>

</View>

This allows components to automatically adapt to different screen resolutions.

Advantages of using NativeWind in React Native

Using NativeWind in React Native brings a number of benefits that make styling simpler and more intuitive:

Styling consistency across platforms

One of the biggest challenges in styling mobile applications is ensuring that the look remains consistent across different devices and operating systems. Tailwind CSS in combination with NativeWind allows for easier style management on both Android and iOS, without the need for separate solutions for each platform.

Quick user interface development

Thanks to the utility-first approach, you don’t have to write long styles in JavaScript files. Instead, you can use Tailwind CSS classes directly in components, which significantly speeds up the user interface development process.

Example of traditional styling in React Native:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to the application!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3498db',
  },
  text: {
    color: '#ffffff',
    fontSize: 18,
  },
});

An example from NativeWind and Tailwind CSS:

jsx

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

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-blue-500">
      <Text className="text-white text-lg">Welcome to the application!</Text>
    </View>
  );
}

Better code organization and readability

Thanks to the use of utility classes in React Native components, we don’t have to create long StyleSheet objects, which makes it easier to manage styles. This makes the code more concise and allows for faster changes to the appearance of components.

Easy implementation of responsiveness

Tailwind CSS offers built-in tools for creating responsive interfaces. This allows us to use sm, md, lg and other classes to adapt the appearance of components to different screen sizes.

Dark mode support

NativeWind allows for easy implementation of dark mode, which is an increasingly popular requirement in modern mobile applications. All you need to do is add the appropriate classes, e.g.:

<Text className="text-black dark:text-white">Light and dark mode</Text>

With this, the application will automatically adjust the colors to the user’s preferences.

Solving the most common problems

When working with NativeWind and Tailwind CSS in React Native, you may encounter some errors. Below you will find solutions to the most common problems and tips on how to deal with them.

1. Tailwind CSS classes don’t work

Problem: After adding Tailwind CSS classes, the components do not change their appearance.
Solution:
– check if you have configured the tailwind.config.js file correctly and if it contains the correct paths
– make sure you have added the NativeWind plugin in babel.config.js:
– restart the development server

2. The app does not recognize className

Problem: React Native reports an error that className is not a valid attribute.
Solution: 
– check if you have installed NativeWind
– make sure you are using Expo version 48 or higher (problems may occur with older versions)
– if the problem persists, use styled instead of className:

3. Tailwind does not work on Android

Problem: The app works fine on iOS, but the Tailwind classes are not applied on Android.

Solution:
– Check if your app is using the latest version of React Native and Expo.
– Check the logs in the terminal to find any rendering errors.
– Perform a full cache clear and restart the app.

4. Dark mode not working

Problem: The Tailwind classes responsible for dark mode are not being applied.

Solution:
– Make sure that the operating system has dark mode enabled.
– If you want to force dark mode, add the option darkMode: “class” to tailwind.config.js.
– you can manually change the dark mode in the code:

FAQ – Frequently Asked Questions

Is NativeWind stable?

Yes, NativeWind is a stable solution and is actively developed by the community. It is widely used in React Native production projects.

How do I use NativeWind in Expo?

Just install NativeWind and Tailwind CSS in your Expo project using:

npm install nativewind tailwindcss

npx tailwindcss init

Then configure tailwind.config.js and add the NativeWind plugin in babel.config.js.

Is it possible to use Tailwind in React Native?
Yes, it is possible to use Tailwind CSS in React Native thanks to the NativeWind library, which interprets Tailwind classes and converts them to native styles.

Does NativeWind work on Android?
Yes, NativeWind works on both Android and iOS because it uses the native React Native API to render styles.

How do I use NativeWind?
After installing NativeWind, you can use Tailwind CSS classes directly in the className attribute of React Native components, e.g.:

<View className="bg-blue-500 p-4 rounded-lg">

  <Text className="text-white font-bold">Hello, NativeWind!</Text>

</View>

Can I use Tailwind with React?
Yes, Tailwind CSS is natively designed for React and React Native applications. For mobile applications, you need to use NativeWind, but for web applications, you can use Tailwind without any additional libraries.