通过 nativewind 或 tailwind 添加 expo google 字体答案

【问题标题】：Add expo google fonts by nativewind or tailwind通过 nativewind 或 tailwind 添加 expo google 字体
【发布时间】：2022-10-14 09:54:41
【问题描述】：

您好，我正在使用 Expo 开发应用程序，以及我正在使用的字体世博会谷歌字体对于字体，并使用原生风对于样式，现在我想在 Native wind 中配置 expo-google-fonts，

我试过这个，

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: [],
}

输出

【问题讨论】：

标签： react-native expo tailwind-css

【解决方案1】：

尝试更换

fontFamily: {
    josefin: ["JosefinSans_500Medium"]
}

和

fontFamily: {
    sans: ["JosefinSans"]
}

它应该工作

【讨论】：