[v4] Icon styles overridden after upgrading to TailwindCSS 4 (fontawesome)

[Simon-BEE]

Hi,

I'm encountering an issue after upgrading to TailwindCSS 4. I've done some research but haven't found any satisfactory answers to the problem I'm facing.

I'm using FontAwesome 6.x (https://docs.fontawesome.com/web/use-with/vue) with Vue.js. After the upgrade, I noticed that most of the styles applied to the svg/FontAwesomeIcon component are being overridden by FontAwesome's default styles.

<font-awesome-icon
    icon="chevron-right"
    class="h-2 w-2 shrink-0 text-gray-600 dark:text-gray-300"
/>

Tailwind v3:

Tailwind v4 :

What are your thoughts on this issue? Do you see any straightforward solutions that could be implemented?

Thanks!

[wongjn]

It seems like you'd need to have the Tailwind utilities outside any cascade layer:

-@import "tailwindcss";
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";

[sebastien-comeau]

Would it be more preferable to import other CSS into layers or I'm looking for trouble? It fixes my issue without changing my tailwind setup.

index.css using cascade layers that is imported before tailwind.css

/*
  Tailwind CSS uses cascade layers to organize styles with a clear hierarchy: theme, base, components, and utilities.

  To maintain consistency and predictable style application:
  - Import external library styles within the vendor layer to contain third-party CSS.
  - Use the theme layer for foundational elements, such as font declarations.
  - Ensure that the cascade order aligns with Tailwind’s design principles to avoid specificity conflicts.

  This approach guarantees that utility classes take precedence and prevents style overrides by third-party code.

  For reference, see the Tailwind CSS index file:
  https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/index.css
*/

@layer vendor, theme, base, components, utilities;

@import './fonts/lato.css' layer(theme);
@import './fonts/noto-sans.css' layer(theme);
@import 'react-phone-number-input/style.css' layer(vendor);
@import '@fortawesome/fontawesome-svg-core/styles.css' layer(vendor);

[wongjn]

Yes, import the other CSS into layers if you can.

[sebastien-comeau]

Thanks!

[danielmarzan]

Thanks this solved my issue today!

[mlorencs]

I have the following setup that works.

npm install --save-dev postcss-import

postcss.config.mjs

const config = {
     plugins: {
          "postcss-import": {},
          "@tailwindcss/postcss": {},
     },
};

style.css

@import "@fortawesome/fontawesome-svg-core/styles.css" layer(vendor); /* make sure it's imported before tailwind */

@import "tailwindcss";

This way you don't need to import each tailwind layer and can use tailwind v4 suggested importing.

Thanks @sebastien-comeau for the inspiration!

[smith558]

I am facing the same issue with my styles which worked fine with TW v3 but don't anymore with v4. Is there a recommended standard approach to how to handle this? I am using Next.js.

[Tbaile]

Without removing cascade layers, I've found a way to keep both layers and custom CSS over the components.

On the main.css I've added:

@layer vendor;

@import 'tailwindcss';

@import "@fortawesome/fontawesome-svg-core/styles.css" layer(vendor);

or, as @mlorencs pointed out:

@import "@fortawesome/fontawesome-svg-core/styles.css" layer(vendor);

@import 'tailwindcss';

order is important, layers are made this way.

Then on any section of the application, removing the auto CSS added by the component:

import { config } from '@fortawesome/fontawesome-svg-core'

config.autoAddCss = false

[matys1]

Bizarrely in my React Router v7 app just adding:

import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

and importing in my entry points files only worked in dev, but in prod bundle the styles were still being injected and in-lined. What worked for me was creating a wrapper for FontAwesomeIcon like:

// app/fa.ts
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

and then importing the FontAwesomeIcon wrapper throughout the app where needed instead of importing directly from @fortawesome/react-fontawesome.