Add expo google fonts by nativewind or tailwind

Hello I am using Expo to develop an app, & for font I am using expo-google-fonts for font, and using NativeWind for styling, Now I want to configure expo-google-fonts in Native wind,

I have tried this,

import { StatusBar } from 'expo-status-bar';
import { View, Text } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, JosefinSans_500Medium } from '@expo-google-fonts/josefin-sans';


export default function App() {
  let [fontsLoaded] = useFonts({
    JosefinSans_500Medium,
  });

  if (!fontsLoaded)
    return null;
  return (
    <View className="flex-1 items-center justify-center h-full w-full">
      <Text style={{ fontFamily: 'JosefinSans_500Medium', fontSize: 20}}>This work fine</Text>
      <Text className="font-josefin text-xl mt-2">This is not working</Text>
      <StatusBar style="auto" />
    </View>
  );
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}", 
    "./screens/*.{js,jsx,ts,tsx}",
    "./components/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'red-700': '#BF2F28',
        'red-600': '#D84942',
        'red-500': '#E0726D',
        'red-400': '#E99B97',
        'red-300': '#F2C3C1',
      },
      fontFamily: {
        josefin: ["JosefinSans_500Medium"]
      },
    },
  },
  plugins: [],
}

Output