为什么 tailwind css 没有在 react-native 中应用为样式？答案

【问题标题】：Why tailwind css is not applying as style in react-native?为什么 tailwind css 没有在 react-native 中应用为样式？
【发布时间】：2022-12-14 22:20:30
【问题描述】：

我的 react-native 项目中使用了 Tailwind CSS。在 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 的风格。但为什么他们不工作？为什么我必须使用风格单独使组件工作？

【问题讨论】：

标签： javascript android react-native tailwind-css

【解决方案1】：

实际上我在 tailwind.config 文件中犯了错误。我在单独的文件夹中做了组件和屏幕，但只在 tailwind.config.js 中提到了屏幕文件夹。

确保您包括所有与 UI 相关的文件夹，这些文件夹在 tailwind 配置文件中明确声明。

【讨论】：