在tailwind.config.ts中定义函数后Nativewind样式不生效求助

针对你在React Native + TypeScript + Expo + Nativewind栈中遇到的自定义配置失效问题，以下是针对性的解决方案：

1. 替换rem单位为React Native兼容格式 #

Nativewind在React Native环境中不支持rem单位（RN使用逻辑像素dp作为默认单位），需修改单位转换逻辑：

// 直接返回px值对应RN的dp单位，无需转换为rem
function pxToRem(px: number) {
  return px;
}

同时调整fontSize、letterSpacing等配置，RN中这些属性接受数字而非带单位的字符串：

letterSpacing: {
  lt: -0.3,
  rg: -0.3,
  md: -0.2,
  bd: -0.1,
},
fontSize: {
  sm: 16,
  md: 20,
},

2. 修正TypeScript配置文件的导出方式 #

改用ES模块导出适配Expo+TS项目，同时添加类型约束避免类型错误：

/* eslint-disable @typescript-eslint/no-unused-vars */
import type { Config } from 'tailwindcss';

function range(start: number, end: number) {
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
};
  
function pxToRem(px: number) {
  return px;
};

const spacing = range(1, 100).reduce((acc, px) => {
  acc[px] = pxToRem(px);
  return acc;
}, {} as Record<number, number>);

export default {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    spacing: spacing,
    borderRadius: {
      sm: pxToRem(10),
      md: pxToRem(20),
      lg: pxToRem(30),
    },
    extend: {
      colors: {
        primary: { DEFAULT: "#5A8CFF" },
        secondary: { DEFAULT: "#FFD65B" },
        black: "#151820",
      },
      fontFamily: {
        lt: ['SpoqaHanSansNeo-Light', 'sans-serif'],
        rg: ['SpoqaHanSansNeo-Regular', 'sans-serif'],
        md: ['SpoqaHanSansNeo-Medium', 'sans-serif'],
        bd: ['SpoqaHanSansNeo-Bold', 'sans-serif'],
      },
      letterSpacing: {
        lt: -0.3,
        rg: -0.3,
        md: -0.2,
        bd: -0.1,
      },
      fontSize: {
        sm: 16,
        md: 20,
      },
    },
  },
  plugins: [],
} satisfies Config;

3. 确保字体正确加载 #

Nativewind不会自动加载自定义字体，需通过expo-font手动加载：
在项目入口（如app/_layout.tsx）添加字体加载逻辑：

import { useFonts } from 'expo-font';
import { SplashScreen } from 'expo-splash-screen';
import { useEffect } from 'react';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    'SpoqaHanSansNeo-Light': require('../assets/fonts/SpoqaHanSansNeo-Light.otf'),
    'SpoqaHanSansNeo-Regular': require('../assets/fonts/SpoqaHanSansNeo-Regular.otf'),
    'SpoqaHanSansNeo-Medium': require('../assets/fonts/SpoqaHanSansNeo-Medium.otf'),
    'SpoqaHanSansNeo-Bold': require('../assets/fonts/SpoqaHanSansNeo-Bold.otf'),
  });

  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  // 渲染应用内容
}

4. 清除缓存并重启服务 #

缓存可能导致配置不生效，执行以下操作：

• 关闭Expo开发服务器
• 删除node_modules/.cache目录
• 启动服务器时添加清除缓存参数：npx expo start -c

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