Expo/NativeWind默认字体未生效：如何将OpenSans设为默认字体

你遇到的问题核心是NativeWind不会自动为原生Text组件应用Tailwind的默认字体配置，可以通过以下两种方式实现全局默认字体：

方案一：使用Tailwind @layer base 全局注入样式 #

这种方式通过定义全局基础样式，让所有Text组件自动继承默认字体：

1. 修改 tailwind.config.js #

直接覆盖默认的fontFamily配置（不要放在extend里，否则只是新增字体类，不会替换默认）：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    fontFamily: {
      sans: ['OpenSans'],
      'sans-light': ['OpenSansLight'],
      'sans-bold': ['OpenSansBold']
    },
  },
  plugins: []
}

2. 创建全局样式文件 #

新建src/styles/global.css，用@layer base定义Text组件的默认样式（NativeWind对原生组件的选择器是小写的text）：

/* src/styles/global.css */
@tailwind base;
@layer base {
  text {
    font-family: theme('fontFamily.sans');
  }
}

3. 在App中导入全局样式 #

在App.js顶部导入全局样式文件：

// App.js
import './src/styles/global.css';
import { useFonts } from 'expo-font';

const App = () => {
  const [fontsLoaded] = useFonts({
    'OpenSans': require('fonts/OpenSans/OpenSans-Regular.ttf'),
    'OpenSansLight': require('fonts/OpenSans/OpenSans-Light.ttf'),
    'OpenSansSemiBold': require('fonts/OpenSans/OpenSans-SemiBold.ttf'),
    'OpenSansBold': require('fonts/OpenSans/OpenSans-Bold.ttf'),
    'OpenSansExtraBold': require('fonts/OpenSans/OpenSans-ExtraBold.ttf'),
    'OpenSansItalic': require('fonts/OpenSans/OpenSans-Italic.ttf')
  })

  return !fontsLoaded ? null : <Text>Test Open Sans</Text>
}

export default App;

方案二：自定义Text组件统一应用默认字体 #

如果不想用全局样式，可以创建一个自定义Text组件，所有页面都使用这个组件来自动带默认字体：

1. 创建自定义Text组件 #

新建src/components/MyText.js：

import { Text } from 'react-native';

const MyText = ({ children, className: customClass, ...props }) => {
  return (
    <Text className={`font-sans ${customClass}`} {...props}>
      {children}
    </Text>
  );
};

export default MyText;

2. 替换原生Text组件 #

在项目所有使用<Text>的地方，替换为自定义的<MyText>，比如：

// 原来的写法
<Text>Test Open Sans</Text>

// 替换为
import MyText from './src/components/MyText';
<MyText>Test Open Sans</MyText>

为什么之前的配置不生效？ #

你之前在theme.extend里定义sans字体，只是给Tailwind新增了一个可选的字体类，但并没有：

1. 覆盖Tailwind默认的sans字体配置（默认是系统字体）
2. 让NativeWind自动将这个字体应用到所有原生Text组件上

通过上面两种方法，就能让OpenSans自动成为所有Text组件的默认字体，无需手动指定className或style。

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