Support font family in Tailwind

I've noticed font family is not currently supported with Tailwind CSS.

Per https://github.com/bernaferrari/FigmaToCode/blob/main/packages/backend/src/tailwind/tailwindTextBuilder.ts#L98

  // todo fontFamily
  //  fontFamily(node: TextNode): this {
  //    return this;
  //  }

In Tailwind the default configuration is https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L302-L323

    fontFamily: {
      sans: [
        'ui-sans-serif',
        'system-ui',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: [
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',
        'Monaco',
        'Consolas',
        '"Liberation Mono"',
        '"Courier New"',
        'monospace',
      ],
    },

where

ui-sans-serif is used by default but can be applied via font-sans class
ui-serif can be applied via font-serif class
ui-monospace can be applied via font-mono class

and we can add custom fonts e.g. in tailwind.config.ts

  theme: {
    extend: {
      fontFamily: {
        mon: ['Montserrat', '"Open Sans"', ...defaultTheme.fontFamily.sans],
      },
    }
  },

allows us to use font-mon class to apply the Montserrat font.

In other for Figma To Code to correctly support font's, it would need a way of mapping the current fonts to the correct Tailwind classes based on the tailwind config.

Alternative ideas:

Allow the Figma text styles to somehow contain the correct classname e.g. within the name.
Add a checkbox option for including 'assumed font class' and just assume the class required is the name of the font dasherized (e.g. if a text element has the font family 'Open Sans', Figma to Code appends the class name font-open-sans)

Is there some kind of plan/preferred approach here?

bernaferrari / FigmaToCode

Support font family in Tailwind #83