[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.