如何在NativeWind中配置expo-google-fonts字体

以下是针对你遇到的「通过className引用字体无效，但直接style设置正常」问题的解决方案：

步骤1：统一字体别名（可选但推荐） #

将useFonts中的字体名称改为更简洁的别名，避免长名称可能导致的匹配问题：

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

export default function App() {
  let [fontsLoaded] = useFonts({
    // 给字体设置简洁别名
    josefin: JosefinSans_500Medium,
  });

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

步骤2：同步Tailwind配置 #

更新tailwind.config.js中的fontFamily配置，确保和你设置的字体别名一致：

/** @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: {
        // 对应useFonts中设置的别名
        josefin: ["josefin"]
      },
    },
  },
  plugins: [],
}

步骤3：清除缓存并重启Metro服务 #

Tailwind配置更新后，缓存常导致新配置不生效，执行以下命令清除缓存并重启：

npx expo start --clear

关键说明 #

• 如果不想修改字体别名，确保tailwind.config.js中的fontFamily值和useFonts里的字体名称完全一致（即JosefinSans_500Medium），但长名称更容易出现拼写错误，推荐使用简洁别名。
• 确认content路径已包含所有使用className的文件，避免Tailwind无法扫描到样式类。

内容的提问来源于stack exchange，提问作者Gulshan Prajapati