為什么 tailwind css 沒有在 react-native 中作為樣式應用？

Question

Tailwind CSS 正在我的 react-native 項目中使用。 在 Touchable 不透明度下，我使用了一個圖像和一個標題，其中的多個通過組件道具傳遞。 像下面這樣：

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

catagoryCard 組件如下所示：

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;

該圖像未出現在使用組件代碼的卡片部分中。 但是當我用

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

在圖像組件下工作完美。 但我的問題是使用 tailwindcss 我也在應用 h & w 的風格。 但為什么他們不工作？ 為什么我必須單獨使用樣式才能使組件工作？

Answer 1

實際上我在 tailwind.config 文件中犯了錯誤。 我在單獨的文件夾中做了組件和屏幕，但只在 tailwind.config.js 中提到了屏幕文件夾。

確保您包括所有與 UI 相關的文件夾，這些文件夾在 tailwind 配置文件中明確聲明。