Getting Started with NativeWind: Using Tailwind CSS in React Native

What is NativeWind?

NativeWind is a library that allows you to use Tailwind CSS in React Native projects. It helps you style your mobile apps quickly and efficiently.

Why Use NativeWind?

• Easy to Use: You can write styles directly in your components.
• Consistent Design: Tailwind CSS ensures your design is consistent across different components.
• Fast Development: Quickly apply styles without writing a lot of custom CSS.

Prerequisites

Before you start, make sure you have:

• Node.js installed
• React Native CLI installed
• Basic knowledge of React Native

Step-by-Step Guide

1. Create a New React Native Project

If you haven't already, create a new React Native project using React Native CLI:

npx react-native init MyNativeWindApp
cd MyNativeWindApp

2. Install NativeWind

Next, install NativeWind and its dependencies:

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

# Yarn
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

3. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file.

Add the paths to all of your component files in your tailwind.config.js file. If you put your screens and components inside the src folder, update <custom-folder> with your folder name. For example, './src/**/*.{js,jsx,ts,tsx}'.

// tailwind.config.js

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Make sure nativewind.d.ts file is created in your project's root directory with the following content:

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

// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

4. Configure Babel

Add the NativeWind plugin to your Babel configuration. Open your babel.config.js file and add the following:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'nativewind/babel',
  ],
}

5. Use NativeWind in Your Components

Now, you can start using NativeWind in your components. Here's an example:

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

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

Button Component

To add margin or padding to buttons, wrap them with a styled component using styled(Button) as shown below:

import { styled } from 'nativewind'
import React from 'react'
import { Pressable, StyleProp, Text, ViewStyle } from 'react-native'

const variantStyles = {
  default: {
    background: 'bg-white',
    text: 'text-black',
  },
  primary: {
    background: 'bg-blue-500',
    text: 'text-white',
  },
}

const StyledPressable = styled(Pressable)

interface Props {
  title: string
  onPress?: () => void
  disabled?: boolean
  variant?: keyof typeof variantStyles
  style?: StyleProp<ViewStyle>
}

function Button({
  onPress,
  title,
  disabled,
  variant = 'default',
  style,
}: Props): JSX.Element {
  return (
    <StyledPressable
      disabled={disabled}
      onPress={onPress}
      className={`rounded-lg p-2 my-1 ${disabled ? 'bg-gray-300' : ''} 
      ${variantStyles[variant].background} active:bg-slate-500 `}
      style={style}>
      <Text
        className={`text-lg font-bold ${variantStyles[variant].text} text-center`}>
        {title}
      </Text>
    </StyledPressable>
  )
}

// Export the styled component
export default styled(Button)

You can now use the Button component in your app. Notice that the className prop is used to apply styles to the component.

import React from 'react'
import { View } from 'react-native'
import Button from './Button'

export default function App() {
  return (
    <View className="flex-1 justify-center items-center">
        <Text>Hello world!</Text>
        <Button title="Press Me" className="mt-4" />
    </View>
  )
}

Conclusion

NativeWind makes it easy to style your React Native apps using Tailwind CSS. With this guide, you should be able to set up and start using NativeWind in your projects. Happy coding!