Tailwind + React Native

1. Create the project

Create the project with the Expo CLI

npx create-expo-app my-app

cd my-app

1. Install tailwind and its dependency

yarn add nativewind
yarn add --dev tailwindcss

2. 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. Remember to replace with the actual name of your directory e.g. screens.

// tailwind.config.js

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

3. Add the Babel plugin

Modify your babel.config.js

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

Code

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

export default function App() {
  return (
   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}