I am attempting to make my first app utilizing React Native and Tailwind. I imported the Rajdhani font household to make use of on this app, however for some purpose solely Rajdhani Daring really exhibits up within the Expo preview on my IOS machine that I am testing on.
that is my index.js file:
import { StatusBar } from "expo-status-bar";
import { Textual content, View} from "react-native";
import { Hyperlink } from "expo-router";
export default operate App(){
return(
<View className="flex-1 items-center justify-center bg-white">
<Textual content className="text-3xl font-rSemiBold">Check check</Textual content>
<StatusBar model="auto" />
<Hyperlink href="/sign-in" model={{colour: 'blue'}}>Proceed to Login</Hyperlink>
</View>
);
}
That is my tailwind.config.js:
/** @sort {import('tailwindcss').Config} */
module.exports = {
content material: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
theme: {
prolong: {
colours: {
main: '#D0E358'
}
},
fontFamily: {
rRegular: ["Rajdhani-Regular", "sans-serif"],
rBold: ["Rajdhani-Bold", "sans-serif"],
rSemiBold: ["Rajdhani-SemiBold", "sans-serif"],
rLight: ["Rajdhani-Light", "sans-serif"],
rMedium: ["Rajdhani-Medium", "sans-serif"]
}
},
plugins: [],
}
and I’ve additionally connected a picture of my folder construction:screenshot
if I change rSemiBold with rBold, then it would work as meant, however any of the opposite members of the font household don’t. I’ve tried messing round with the config file by including single quotes round my customized font names or contained in the double quotes however nothing has labored. The file names are appropriate too and I checked the ttf information to ensure there was nothing improper with them