Why tailwind css is not applying as style in react-native?

Question

Tailwind CSS is being used in my react-native project. Under the Touchable opacity i am using a image and a title and multiple of them are passed through the components props. Like below:

import { View, Text, ScrollView } from 'react-native'
import React from 'react'
import CatagoryCard from './CatagoryCard'

const Catagories = () => {
  return (
    <ScrollView horizontal
    showsVerticalScrollIndicator={false}
    contentContainerStyle={{
      paddingHorizontal:15,
      paddingTop:10
    }}>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 1"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 2"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 3"/>

    </ScrollView>
  )
}

export default Catagories

And the catagoryCard components looks like this:

import {Text, TouchableOpacity,Image } from 'react-native'
import React from 'react'

const CatagoryCard = ({imgUrl,title}) => {
  return (
    <TouchableOpacity>
        <Image
            source = {{uri:imgUrl}}
            resizeMode = 'contain'
            className = "h-20 w-20 rounded flex-2"
        />
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

export default CatagoryCard;

The image was not appearing in the card section using the component code. But when I used

style={{height: 50, width: 50}}

ubder the image component is working perfectly. But my question is using tailwindcss i am also applying the style of h & w. But why they are not working? Why do I have to use the style separately to make the component work?

Answer 1

Actually I did the mistakes in the tailwind.config file. I did components and screens in separate folder but mentioned about the screens folder only in tailwind.config.js.

Make sure you includes all your UI related folders are specifically declared on the tailwind config file.