How to use a className prop

[rochajulian]

import React from "react";
import { Image } from "expo-image";
import { tv } from "tailwind-variants";

const avatar = tv({
  base: "rounded-full",
  variants: {
    size: {
      md: "h-12 w-12",
      lg: "h-32 w-32"
    }
  },
  defaultVariants: {
    size: "md"
  }
});

export default function Avatar({ size, imageUrl, className }) {
  return (
    <Image
      className={avatar({ size, className })}
      source={imageUrl}
      contentFit="cover"
    />
  );
}

Hi! I am on React Native (Expo) and want to be able to pass extra classes to this component such as "mt-40" when I want. I am looking to use the className prop that Tailwind Variants docs (https://www.tailwind-variants.org/docs/overriding-styles) describes but this does not work as a prop for some reason. It only works when I declare the value right then and there as so:

import React from "react";
import { Image } from "expo-image";
import { tv } from "tailwind-variants";

const avatar = tv({
  base: "rounded-full",
  variants: {
    size: {
      md: "h-12 w-12",
      lg: "h-32 w-32"
    }
  },
  defaultVariants: {
    size: "md"
  }
});

export default function Avatar({ size, imageUrl, className }) {
  return (
    <Image
      className={avatar({ size, className: "mt-40" })}
      source={imageUrl}
      contentFit="cover"
    />
  );
}

As you can see though, in this second case the className prop is not being used. How can I get it to use it?

You might wonder what happens when I try to use it as a prop. Well, unfortunately, nothing happens to the styling :(

[mskelton]

@rochajulian Your code is fine, so it must be an issue with your configuration of Tailwind or React Native. I personally haven't used Tailwind + React Native, so I'm not a huge help there.

[rochajulian]

Hi,

Understood. I wonder if any "plain" React devs can report to this same issue. That being said, for anyone that comes by and reads this thread, I'm happy to provide any other info to get this resolved, just let me know what you need.