v4: custom font not working with TW classes, but does work with inline styles

[tconroy]

Describe the bug
A custom font (loaded using expo-fonts) is visible when using inline style={{ fontfamily: 'Custom Font' }} prop, but is not visible when using TW class name className="font-customFont"

other tailwind classes work as expected.

To Reproduce
tailwind.config.js

import type { Config } from "tailwindcss";

export default {
  darkMode: ["class"],
  content: ["src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {
      fontFamily: {
        lexend: ["Lexend Deca"]
      },
    },
  },
} satisfies Config;

FontsProvider

import {
  LexendDeca_100Thin,
  LexendDeca_200ExtraLight,
  LexendDeca_300Light,
  LexendDeca_400Regular,
  LexendDeca_500Medium,
  LexendDeca_600SemiBold,
  LexendDeca_700Bold,
  LexendDeca_800ExtraBold,
  LexendDeca_900Black,
  useFonts,
} from "@expo-google-fonts/lexend-deca";

interface Props {
  children?: React.ReactNode;
}

export default function FontProvider(props: Props) {
  const [fontsLoaded, error] = useFonts({
    LexendDeca_100Thin,
    LexendDeca_200ExtraLight,
    LexendDeca_300Light,
    LexendDeca_400Regular,
    LexendDeca_500Medium,
    LexendDeca_600SemiBold,
    LexendDeca_700Bold,
    LexendDeca_800ExtraBold,
    LexendDeca_900Black,
  });

  if (!fontsLoaded) {
    return null;
  }

  return <>{props.children}</>;
}

RootLayout

import "../styles.css";

export default function RootLayout() {
  return (
    <FontProvider>
      <App />
    </FontProvider>
  );
}

** ✅ this works:**

        <Text
          style={
            {
              fontFamily: "Lexend Deca",
            }
          }
        >
          test
        </Text>

❌ this does not work

        <Text
          className="font-lexend"
        >
          test
        </Text>

Expected behavior
Expect to see the same font as inline font.

[angelo-hub]

+1 also have this issue

[tyrauber]

Hey @tconroy, I believe you need to define each font-family weight individually in your tailwind config.

    extend: {
      fontFamily: {
        "lexend-thin": ["LexendDeca_100Thin"],
        "lexend-extrathin": ["LexendDeca_200ExtraLight"]
      },
    },

Technically they are different font files.

[AyoCodess]

Hey @tconroy, I believe you need to define each font-family weight individually in your tailwind config.

    extend: {

      fontFamily: {

        "lexend-thin": ["LexendDeca_100Thin"],

        "lexend-extrathin": ["LexendDeca_200ExtraLight"]

      },

    },

Technically they are different font files.

This is the bitter truth i had to accept too.