Tailwind css config file compiles in wrong order in Apostrophe CMS

I'm trying to set up some custom fonts in tailwinds config file. It seems to work however it adds the custom fonts and the original tailwind font styles in my css and the order of them makes it default to tailwinds css (see the screenshot of the inspector of the css) bellow is my config file code. some things to note I'm using Apostrophe CMS and scss.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: [ 'Graphik', 'sans-serif' ],
      serif: [ 'Merriweather', 'serif' ]
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};

Try putting your fontFamily inside extend, like this:

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
              sans: [ 'Graphik', 'sans-serif' ],
              serif: [ 'Merriweather', 'serif' ],
            },
        },
    },
    variants: {
        extend: {}
    },
    plugins: []
};