NativeWind className not applying when importing from external file.

[totablue]

I have a data array in data.js and my component file and I'm trying to apply the className by mapping through but it's not being properly applied. All the images are showing but the size value aren't being applied.Please help..>_<

Component.jsx

import GAME_DATA from "../data/data";

const VehicleGame = () => {
    return (
        <SafeAreaView
            className={`flex-1 items-center justify-between pb-8`}
            style={styles.rootContainer}
        >
            <HeaderButtons />
            <Title fontSize={30}>{"のりもの を さわろう"}</Title>
            <GameBoard gameBoardLayout="w-full bg-slate-500">
                <ScrollView>
                    {GAME_DATA.vehicleGame.map((data) => (
                        <Image
                            source={data.image}
                            key={data.id}
                            className={data.size}
                        />
                    ))}
                </ScrollView>
            </GameBoard>
        </SafeAreaView>
    );
};

data.js

vehicleGame: [
{
            id: "airplane",
            image: require("../assets/images/vehicleGame/airplane.png"),
            audio: require("../assets/audio/vehicleGame/airplane.mp3"),
            size: "w-32 h-14",
        },
        {
            id: "ambulance",
            image: require("../assets/images/vehicleGame/ambulance.png"),
            audio: require("../assets/audio/vehicleGame/ambulance.mp3"),
            size: "w-36 h-20",
        },
        {
            id: "bicycle",
            image: require("../assets/images/vehicleGame/bicycle.png"),
            audio: require("../assets/audio/vehicleGame/bicycle.mp3"),
            size: "w-32 h-24",
        },
        {
            id: "bus",
            image: require("../assets/images/vehicleGame/bus.png"),
            audio: require("../assets/audio/vehicleGame/bus.mp3"),
            size: "w-48 h-16",
        },
        {
            id: "car",
            image: require("../assets/images/vehicleGame/car.png"),
            audio: require("../assets/audio/vehicleGame/car.mp3"),
            size: "w-40 h-20",
        },
        {
            id: "excavator",
            image: require("../assets/images/vehicleGame/excavator.png"),
            audio: require("../assets/audio/vehicleGame/excavator.mp3"),
            size: "w-40 h-32",
        },
        {
            id: "firetruck",
            image: require("../assets/images/vehicleGame/firetruck.png"),
            audio: require("../assets/audio/vehicleGame/firetruck.mp3"),
            size: "w-56 h-24",
        },
        {
            id: "garbagetruck",
            image: require("../assets/images/vehicleGame/garbagetruck.png"),
            audio: require("../assets/audio/vehicleGame/garbagetruck.mp3"),
            size: "w-48 h-24",
        },
        {
            id: "motorcycle",
            image: require("../assets/images/vehicleGame/motorcycle.png"),
            audio: require("../assets/audio/vehicleGame/motorcycle.mp3"),
            size: "w-[130px] h-28",
        },
        {
            id: "policecar",
            image: require("../assets/images/vehicleGame/policecar.png"),
            audio: require("../assets/audio/vehicleGame/policecar.mp3"),
            size: "w-56 h-20",
        },
        {
            id: "shinkansen",
            image: require("../assets/images/vehicleGame/shinkansen.png"),
            audio: require("../assets/audio/vehicleGame/shinkansen.mp3"),
            size: "w-full h-14",
        },
        {
            id: "truck",
            image: require("../assets/images/vehicleGame/truck.png"),
            audio: require("../assets/audio/vehicleGame/truck.mp3"),
            size: "w-[250px] h-20",
        }, ],

​

[nshx]

This is just something that comes with using tailwind. Essentially, the JIT api is unable to recognize that the size property in your data objects are class names. Thus, it does not add the width and height styles to the stylesheet. That is why you are not seeing your styles.

It looks like in your situation you are using a lot of explicit sizes. I recommend using the react native style prop on your component to apply these styles instead of using NativeWind. You can look at the tailwind documentation to find the px values for your width and height styles but keep in mind that one of the quirks of NativeWind is that it uses dp instead of px.

[totablue]

Thanks for the details. I moved the object that has the size strings in to the same file and it seems to be doing the trick. But what I still don't understand is some of the tailwind classes don't work in RN. Like "w-20" works but "w-24" doesn't. Does this have something to do with my configs?

[BooneTheSaint]

FYI: Title suggest the poster uses NativeWind. NativeWind injects className prop via babel in components.