Getting Started

Set up Nativewind and Natively in your React Native project

What is this guide for?

This guide will help you set up Nativewind (Tailwind CSS for React Native) and the natively CLI tool. Nativewind allows you to use Tailwind CSS classes in your React Native projects, while natively provides a collection of pre-built, customizable components that work seamlessly with Nativewind.

Prerequisites

  • React Native development environment
  • Node.js 16.0 or later
  • npm or similar package manager
  • An existing Expo project

Part 1: Setting Up Nativewind

1

Install Nativewind

npm install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npm install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
2

Initialize Tailwind CSS

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

npx tailwindcss init
3

Configure Tailwind

Add the paths to all of your component files in your tailwind.config.js file.

tailwind.config.js
1/** @type {import('tailwindcss').Config} */ 2module.exports = { 3 // NOTE: Update this to include the paths to all of your component files. 4 content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"], 5 presets: [require("nativewind/preset")], 6 theme: { 7 extend: {}, 8 }, 9 plugins: [], 10}; 11
4

Configure your metro.config.js

Create a metro.config.js file in the root of your project if you don't already have one, then add the following configuration:

metro.config.js
1const { getDefaultConfig } = require("expo/metro-config"); 2const { withNativeWind } = require('nativewind/metro'); 3 4const config = getDefaultConfig(__dirname) 5 6module.exports = withNativeWind(config, { input: './global.css' })
5

Create the CSS File

Create a CSS file and add the Tailwind directives.

1@tailwind base; 2@tailwind components; 3@tailwind utilities;
6

Add the Babel preset

babel.config.js
1module.exports = function (api) { 2 api.cache(true); 3 return { 4 presets: [ 5 ["babel-preset-expo", { jsxImportSource: "nativewind" }], 6 "nativewind/babel", 7 ], 8 }; 9};
7

Import Global CSS

Add this import to your App.js or main entry file:

App.tsx
1import "./global.css" 2 3export default App() { 4 /* Your App */ 5}
8

Configure TypeScript (if using TypeScript)

Create or update Nativewind-env.d.ts:

/// <reference types="Nativewind/types" />

For more information, Please follow the Typescript Guide

Part 2: Setting Up Natively

1

Initialize natively in Your Project

npx natively-ui init

That's it! This will create the necessary configuration files and folder structure for natively components.

2

Using Natively

Install Components

npx natively-ui add [component-name]

Example:

npx natively-ui add button
npx natively-ui add card
npx natively-ui add avatar

Next Steps

Now that you have both Nativewind and natively set up:

1

Browse Components

Use npx natively-ui add --all to add all available components

2

Install Your First Component

Try installing a Button or Card component

3

Start Building

Begin using Tailwind classes and natively components in your app

4

Customize

Modify the installed components to match your design system

🎉 You're ready to start building beautiful React Native apps with Natively!