Question 34645 in React native Question posted in
The official React Native documentation can be found here.

Why nativewind styles doesn't work if the styling is done at component level? – React native

React-native styling using Nativewind works fine if the styling is done at App.Js. Like here:

<NavigationContainer>
      <View>
      <Text className = "text-red-500">Hello</Text>
    </View>
    </NavigationContainer>

But if the styling is done at component level, then it doesn’t work anymore.

return (
    <NavigationContainer>
      <HomeScreen/>
    </NavigationContainer>
  );

HomeScreen Component:

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

const HomeScreen = () => {
  return (
    <View>
      <Text className = "text-red-500">Hello</Text>
    </View>
  )
}

export default HomeScreen
Tags:

2

Answers


  1. 0

    You’ll need to tell nativewind the locations of where your components reside by adding this to your tailwind.config.ts

    content: ["./App.{js,jsx,ts,tsx}", "./<custom directory such as src>/**/*.{js,jsx,ts,tsx}"],

    reference: https://www.nativewind.dev/quick-starts/react-native-cli

    Login or Signup to reply.
  2. 0

    If you setup folder in tailwind.config.js and still not work then delete nodemodule then install it again and it will work.

    This works for me:

    content: ["./App.{js,jsx,ts,tsx}", "./<custom directory such as src>/**/*.{js,jsx,ts,tsx}"]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search