Why is Nativewind breaking these styles?

Question

I have this React Native basic project up and running smoothly. I added Nativewind to use Tailwindcss and if I add a basic class, it works fine (that bg-red-500 class is working as expected):

import '@expo/metro-runtime';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import './estilos/main.css';
export default function App() {
  return (
    <View>
      <Text className='bg-red-500'>tailwind running</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Rendering that <Text> component to:

<div dir="auto" class="css-text-146c3p1 r-backgroundColor-dpkc41">tailwind running</div>

Now, the problem I´m having is when I add a second class to that component, for example, if i add just a padding with:

<Text className='bg-red-500 p-6'>tailwind running</Text>

it renders that same component to (note both classed added):

<div dir="auto" class="css-text-146c3p1 bg-red-500 p-6">tailwind running</div>

but padding not applied, and actually it loses the background-color that it was working previously.

What could be the reason for this?

Answer 1

Do you get this issue on a ios/android device or is in the browser, because in the browser you will need to make some extra steps to make sure nativewind is transpiled, you can read more about it here

Expo Web When running on web, NativeWind is a compatability layer between Tailwind CSS and React Native.

You will need follow a Tailwind CSS installation guide and ensure NativeWind is transpiled.