How to Style Your React Native App with Tailwindcss: A Comprehensive Guide to Setup

How to Style Your React Native App with Tailwindcss: A Comprehensive Guide to Setup

What is NativeWind?

NativeWind uses Tailwind CSS as a scripting language to create a universal styling system. Styled components can be shared between all React Native platforms, using the best style engine for that platform; CSS StyleSheet on the web and StyleSheet.create for native. It's goals are to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.

NativeWind processes your styles during your application's build and uses a minimal runtime to selectively apply responsive styles (e.g. changes to device orientation, color scheme).

1. Create the project

Create the project with the Expo CLI

npx create-expo-app awesome-app

cd awesome-app

We will need to install nativewind and it's peer dependency tailwindcss.

yarn add nativewind
yarn add --dev tailwindcss

2. Setup Tailwind CSS

Let's 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.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [],

3. Add the Babel plugin

Modify your babel.config.js

module.exports = function (api) {
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],

Here we go ๐ŸŽ‰

Let's copy this code and paste it in our App.js.

import { StatusBar } from 'expo-status-bar';
import {
} from 'react-native';

function SimpleCard() {
  return (
    <View className='border-4 p-2 rounded-md border-blue-600 mb-3'>
      <View className='flex flex-row justify-between items-center ml-4'>
        <Text className='text-gray-700 font-semibold text-lg'>Energy</Text>
          <View className='p-3 bg-blue-600 rounded-md'>
            <Text className='text-blue-50'>Connect</Text>

export default function App() {
  return (
      <StatusBar style='auto' />
      <View className='px-4'>
        <SimpleCard />
        <SimpleCard />
        <SimpleCard />
        <SimpleCard />

We did it.

You can check Nativewind documentation for more information.


Thanks for following along.