Create React Native project by Expo

Use NativeWind

Install these two packages

yarn add nativewind
yarn add --dev tailwindcss

Setup Tailwind CSS

Run this cli to create file tailwind.config.js

npx tailwindcss init

Edit tailwind.config.js as follows

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  plugins: [],

Create file app.d.ts and edit

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

Use react-native-paper

Import package

yarn add react-native-paper

Edit babel.config.js

module.exports = function(api) {
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],

Edit App.tsx

import { StatusBar } from 'expo-status-bar'
import { View } from 'react-native'
import { Provider as PaperProvider, Button, Paragraph } from 'react-native-paper'
export default function App() {
  return (
      <View className="flex-1 items-center justify-center bg-white">
        <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
          Press me
        <Paragraph className='text-[#0000ff]'>Paragraph</Paragraph>
        <StatusBar style="auto" />


yarn ios

if not working, close App and try:

npx expo run --ios -c