Accept font-family property

In tailwind.config.js, I want to implement the following component but I can’t because “font-family” is ignored

plugins: [
    plugin(function ({ addComponents }) {
      addComponents({
        h1: {
          fontFamily: 'Roboto_300Light',
          fontStyle: 'normal',
          fontWeight: '300',
          fontSize: 96,
          lineHeight: '7rem',
          letterSpacing: -1.5,
        },
      });
    }),
]

[buitrbao222]

You can create your own custom styles object and pass it in the create function. For example:

import generatedStyles from 'styles.json';

const customStyles = {
  h1: {
    fontFamily: 'Roboto_300Light',
    fontStyle: 'normal',
    fontWeight: '300',
    fontSize: 96,
    lineHeight: '7rem',
    letterSpacing: -1.5,
  },
};

const { tailwind, getColor } = create({ ...generatedStyles, ...customStyles });

export { tailwind, getColor };

Now tailwind('h1') will work.

However, classes in customStyles won’t be suggested by the TailwindCSS Intellisense plugin because the plugin uses your tailwind.config.js file for suggestions.

[vadimdemedes]

There seems to be plenty of tutorials about this, here’s one for example → https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e.