如何在React Native CLI项目的Tailwind CSS中设置默认字体及全局自定义字体

前置准备：添加并链接自定义字体 #

• 将自定义字体文件（如CustomFont-Regular.ttf、CustomFont-Bold.ttf）放到项目的assets/fonts目录（没有就新建）
• 在项目根目录创建或修改react-native.config.js，配置字体资源路径：

module.exports = {
  assets: ['./assets/fonts/'],
};

• 执行命令完成字体链接：

npx react-native-asset

配置默认字体族（Tailwind侧） #

打开项目根目录的tailwind.config.js，通过theme.fontFamily定义字体族，按需设置为默认：

选项1：添加自定义字体族（不替换默认） #

通过extend字段新增字体族，之后可通过font-custom这类className调用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        custom: ['CustomFont-Regular', 'sans-serif'],
        customBold: ['CustomFont-Bold', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

选项2：替换Tailwind默认字体族 #

直接覆盖theme.fontFamily，把自定义字体设为全局默认的sans（常用无衬线字体）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ['CustomFont-Regular', 'sans-serif'],
      bold: ['CustomFont-Bold', 'sans-serif'],
      // 可选：保留其他默认字体族
      serif: ['Georgia', 'serif'],
      mono: ['Menlo', 'monospace'],
    },
  },
  plugins: [],
};

全局应用自定义字体 #

有两种简便方式实现全局生效：

方式1：通过Tailwind插件注入全局样式 #

修改tailwind.config.js的plugins字段，给所有Text组件默认应用自定义字体：

plugins: [
  ({ addBase }) => {
    addBase({
      'Text': { fontFamily: 'CustomFont-Regular' },
      // 给加粗文本单独指定字体
      'Text[fontWeight="bold"]': { fontFamily: 'CustomFont-Bold' },
    });
  },
],

配置后，所有React Native的Text组件无需额外className，自动使用自定义字体。

方式2：全局容器继承字体 #

在根组件（如App.js/App.tsx）中，用外层View包裹所有内容，设置字体类名，子组件文本会自动继承：

import { View } from 'react-native';

export default function App() {
  return (
    <View className="font-custom">
      {/* 所有页面/子组件内容 */}
    </View>
  );
}

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