Oversized icons in a statically generated site

I believe my issue is similar to this one here: https://github.com/FortAwesome/vue-fontawesome/issues/14

I am using Nuxt.js to build and deploy on netlify. I run npm run generate there to generate the statically generated site and deploy the dist folder to the server. While in "dev mode" with npm run dev, all icons are displayed correctly and tailwindcss font-styles are applied. On prod they are massively oversized.

Expected: website

Current state: oversized

I tried to apply the nuxt.js instructions from the old repo (link above), but to no avail.

// nuxt.config.js
...
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
    // Docs: https://github.com/nuxt-community/fontawesome-module
    '@nuxtjs/fontawesome'
  ],
  tailwindcss: {
    configPath: '~/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    purgeCSSInDev: false
  },
  fontawesome: {
    suffix: true,
    icons: {
      solid: ['faRss'],
      brands: ['faGitlab', 'faGithub', 'faDocker', 'faTwitter', 'faXing']
    }
  },
...

// index.vue
<template>
  <main class="flex flex-1 flex-col md:flex-row md:justify-center pt-10">
    <section class="w-full md:w-5/8 mb-16 md:mb-0">
      <Slogan
        class="text-2xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl pt-0 md:pt-12 mb-6 sm:mb-8 md:mb-12 font-hairline "
      />
      <ul class="flex flex-row flex-wrap">
        <li v-for="(link, index) in links" :key="index" class="mr-6 mb-6 sm:mr-8 md:mr-6 lg:mr-6">
          <a :href="link.href" target="_blank" rel="noopener noreferrer"
            ><FontAwesomeIcon
              :icon="link.icon"
              class="text-xl sm:text-2xl md:text-xl lg:text-3xl xl:text-4xl cursor-pointer transform transition duration-300 ease-in-out hover:scale-125"
              :class="'hover:' + link.hover"
          /></a>
        </li>
      </ul>
    </section>
    <section class="w-full md:w-3/8 p-12 md:p-0">
      <img
        src="~/assets/img/home.svg"
        alt="A man builds a website on an oversized screen surrounded by nature."
        class="transform  transition duration-500 ease-in-out hover:opacity-90"
      />
    </section>
  </main>
</template>

<script>
import Slogan from '~/components/Slogan.vue'

export default {
  components: {
    Slogan
  },
  data() {
    return {
      links: [
        {
          href: 'https://gitlab.com/m.dirim',
          icon: ['fab', 'gitlab'],
          hover: 'text-orange-500'
        },
        {
          href: 'https://github.com/leeniu',
          icon: ['fab', 'github'],
          hover: 'text-indigo-500'
        },
        {
          href: 'https://hub.docker.com/u/malikdirim',
          icon: ['fab', 'docker'],
          hover: 'text-blue-500'
        },
        {
          href: 'https://malikdirim.me',
          icon: ['fas', 'rss'],
          hover: 'text-red-500'
        },
        {
          href: 'https://twitter.com/malikdirim',
          icon: ['fab', 'twitter'],
          hover: 'text-blue-500'
        },
        {
          href: 'https://www.xing.com/profile/Malik_Dirim/',
          icon: ['fab', 'xing'],
          hover: 'text-green-500'
        }
      ]
    }
  }
}
</script>

<style lang="scss"></style>

nuxt-community / fontawesome-module

Oversized icons in a statically generated site #9