Fontawesome classes are purged when using @nuxtjs/tailwindcss

[rw-simon]

I would love to use Fontawesome 6 with Nuxt and Tailwind. I followed the instructions provided at https://fontawesome.com/v6.0/docs/web/use-with/vue/use-with, but in production the Fontawesome classes still are purged.

I created a repo to reproduce the error. https://github.com/rw-simon/test-nuxt-tailwind-fontawesome.git

Also tried:

• Purging in tailwind.config.js
• Purging specific class names rather than regex

Where did I go wrong? Thanks in advance for any help you can provide 😉

Cheers Simon

Version

@nuxtjs/tailwindcss: 4.2.0 nuxt: 2.15.7

Reproduction Link

https://github.com/rw-simon/test-nuxt-tailwind-fontawesome.git

Steps to reproduce

1. Install with npm install
2. Run npm run dev -> it works fine in dev enviroment
3. Run npm run build & npm run start -> does not work in production enviroment

What is Expected?

It is expected that the Fontawesome classes (e.x. "fa-lg" or "svg-inline--fa") are not purged, since they are excluded in the nuxt.config.js.

What is actually happening?

All Fontawesome classes are purged.

[aaronhuisinga]

We are having the same issue here. Even using the safelist within the config doesn't seem to stop the classes from being removed.

Our safelist within tailwind.config.js:

safelist: [
  {
    pattern: /fa.*/,
  },
  {
    pattern: /svg.*/,
  },
],

I actually even hardcoded 'fa-bell' (an icon we are using) into the safelist and it was removed. I'm not sure what the cause here is.

[usename-Poezd]

+1

[stefanobartoletti]

I'm also experiencing this problem, in my case it happens only after upgrading @nuxtjs/tailwindcss to version 5.0.0, with version 4.2.1 everything was working as expected

[adayNU]

This also happened to me when upgrading to 5.0.0 and FA ^3. This feels quite hacky, but I was able to get this working by explicitly importing the font awesome css in my nuxt.config.js. e.g.

// nuxt.config.js
export default {
    // ...

    css: [
        // ...
        '@/node_modules/@fortawesome/fontawesome-svg-core/styles.css',
    ],

    // ...
}
``

[FollowJack]

None of the suggested solutions work. Is there any other way?

[ineshbose]

I'd say this is about configuring the CSS.

Either you can put it in nuxt.options.css and it's not related to Tailwind, and it ships like a normal CSS file. Or if you do include it with Tailwind, you will need to also configure JIT appropriately.

If an updated replication could be provided, I'll be very happy to help. If a solution has been found by now, please do share here.

[stefanobartoletti]

Not really a proper solution, but the Nuxt Icon module works like a charm without any problems and provides many more sources for icons beyond Font Awesome

[ineshbose]

Closing this issue.. but please feel free to report any issues you face related to it 🙂