Primeicons issues with Tailwind 4 and postcss

[blackat]

Describe the bug

Hello,
I have update to PrimeNG 19.0.5 and Angular 19.1.4.
I have seen that PrimeFlex has been deprecated in favour of Tailwind 4.

I have followed the Tailwind page to install the required dependencies and I started to have issues with Primeicons:

Application bundle generation failed. [0.855 seconds]

✘ [ERROR] Could not resolve "./fonts/primeicons.eot" [plugin angular-css-resource]

    src/styles.css:554:11:
      554 │   src: url('./fonts/primeicons.eot');
          ╵            ~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./fonts/primeicons.eot?#iefix" [plugin angular-css-resource]

    src/styles.css:555:11:
      555 │   src: url('./fonts/primeicons.eot?#iefix') format('embedded-open...
          ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./fonts/primeicons.woff2" [plugin angular-css-resource]

    src/styles.css:555:77:
      555 │ ...d-opentype'), url('./fonts/primeicons.woff2') format('woff2'),...
          ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./fonts/primeicons.woff" [plugin angular-css-resource]

    src/styles.css:555:126:
      555 │ ...rmat('woff2'), url('./fonts/primeicons.woff') format('woff'), ...
          ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./fonts/primeicons.ttf" [plugin angular-css-resource]

    src/styles.css:555:173:
      555 │ ...ormat('woff'), url('./fonts/primeicons.ttf') format('truetype'...
          ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Could not resolve "./fonts/primeicons.svg?#primeicons" [plugin angular-css-resource]

    src/styles.css:555:223:
      555 │ ...etype'), url('./fonts/primeicons.svg?#primeicons') format('svg');
          ╵                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

After many tests I have seen the issues happens when I add tailwindcss and postcss.
I have also clone the PrimeNG repo and noticed you use Tailwind 3 and the configuration file that is not anymore used in version 4.

For the time being I am progressing with the migration of the app from PrimeNG 17 to 19 excluding Primeicons, do you have please a workaround for this issue?

Thanks in advance

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-kukoe1tg?file=package.json,.postcssrc.json,.gitignore

Environment

• PrimeNG 19.0.5
• Angular 19.1.4
• Tailwind 4
• OSX Sequoia 15

Angular version

19.1.4

PrimeNG version

v19

Node version

22.6.0

Browser(s)

Chrome Version 132.0.6834.83 (Official Build) (arm64)

Steps to reproduce the behavior

Basically the steps described here

1. ng new my-project --style css
2. cd my-project
3. npm install tailwindcss @tailwindcss/postcss postcss --force
4. install primeicons
5. ng serve

Attention! Consider also this issue opened by Tailwind team on Angular CLI 19.

Expected behavior

ng serve command runs fine, no errors, and I can see the primeicons

[YoussefSell]

I managed to get it working with a simple update. After installing the required packages using:
npm install tailwindcss @tailwindcss/postcss postcss --force

after that install the tailwindcss-primeui plugin using: npm i tailwindcss-primeui

I updated my styles.scss file as follows:

@plugin 'tailwindcss-primeui';
@layer tailwind, primeng;

@layer tailwind {
  @import "tailwindcss";
}

Next, I added a new file at the project root called .postcssrc.json to configure postcss with the following content:

{
    "plugins": {
        "@tailwindcss/postcss": {}
    }
}

then in the providePrimeNG function, I updated the cssLayer.order as follows:

providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: '.dark',
          cssLayer: {
            name: 'primeng',
            order: 'tailwind, primeng',
          },
        },
      },
    }),

After these changes, everything worked as expected.

Note: This was done on a new project. For existing projects, additional configuration may be required depending on the project's complexity. I recommend following the Tailwind migration guide.

[AymKh]

@YoussefSell Thanks for your quick input.
I faced the same issue earlier when I created a new Angular 17 / Tailwind 4 project.

I have updated the styles.scss files like you suggested, however i don't know where the providePrimeNG is...?

Can you please clarify.
Thanks

[blackat]

Hello @YoussefSell,
thanks a lot lot for your answer, I have tried both in an empty project and in my current project I am migrating.

Empty project generated by Angular CLI (here I use css)

my styles.css:

@import "tailwindcss";
@import "primeicons/primeicons.css";

@layer tailwind, primeng;

@layer tailwind {
  @import "tailwindcss";
}

my app.config.ts:

import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
import {providePrimeNG} from 'primeng/config';
import Aura from '@primeng/themes/aura'

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({eventCoalescing: true}), provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: '.dark',
          cssLayer: {
            name: 'primeng',
            order: 'tailwind, primeng',
          },
        },
      },
    })
  ],
};

Issues

• Same as before if I include @import "primeicons/primeicons.css";
• I also have Misplaced @import error warning in the styles.css

Current project I am migrating (here I use scss)

my styles.scss:

@import "tailwindcss";
@import "primeicons/primeicons.css";

@layer tailwind, primeng;

@layer tailwind {
  @import "tailwindcss";
}

Issues

• I get a warning around the @import deprecation and I cannot use @use
  • Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
• I still get the same error as before

[blackat]

@YoussefSell Thanks for your quick input. I faced the same issue earlier when I created a new Angular 17 / Tailwind 4 project.

I have updated the styles.scss files like you suggested, however i don't know where the providePrimeNG is...?

Can you please clarify. Thanks

I think the providePrimeNG() is available from PrimeNG 18+.

[YoussefSell]

@AymKh providePrimeNG() is available in PrimeNG 18+

[YoussefSell]

@blackat to use primeicons, after installing it, update your styles.css as follow:

@use "primeicons/primeicons.css";
@plugin 'tailwindcss-primeui';
@layer tailwind, primeng;

@layer tailwind {
  @import "tailwindcss";
}

it worked from me

[blackat]

Hello @YoussefSell,
yes it works now!!! really cool 🚀

Sorry if I exploit a bit more your time:

• I still have the issue with @import: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. is there something else I could use?
• @plugin 'tailwindcss-primeui' is not only till Tailwind 3?

Thanks again for your help, much appreciated 😄

Update

I have noticed that this part

@layer tailwind {
   @import "tailwindcss";
}

override something (not sure if the right term), basically all the m-x classes and similars have not effect.
I have remove it and I can see the icons and the m-x classes work now.

Not sure what that @layer does, but it seems to me some classes of Tailwind do not work correctly.

[JohnFredMeyer]

@YoussefSell Your fix worked but what I have noticed is if using in the styleclass for a primeng component it loses specifity. So now I have to use !class in the styleclass.

Example

<p-button (onClick)="click()"
[text]="true"
styleClass="!p-0 !flex !items-end">

whereas before I could use
<p-button (onClick)="click()"
[text]="true"
styleClass="p-0 flex items-end">

like referenced here https://primeng.org/tailwind

Any ideas on that?

[JohnFredMeyer]

Well to help others since the documentation for tailwind integration is no longer correct. Ill post this to help.

@import "tailwindcss/preflight.css" layer(tailwind-base);
@import "tailwindcss/theme.css" layer(tailwind-theme);
@import "tailwindcss/utilities.css" layer(tailwind-utilities);
@plugin 'tailwindcss-primeui';

@layer tailwind-base, tailwind-theme, tailwind-utilities, primeng;

@theme {
--spacing: .25rem
}

this
  .config
  .theme
  .set({
    preset: MyPreset,
    options: {
      prefix: "",
      darkModeSelector: "null",
      cssLayer: {
        name: "primeng",
        order: "tailwind-base, tailwind-theme, primeng, tailwind-utilities"
      }
    }
  });

If you use the imports like above they will be named the same and it will work just like before. Also since the switch to v4 takes something like w-* equals now width: calc(var(--spacing * *) you have to set a spacing value. To keep the same for an existing project you have to set spacing to .25rem. Lastly if you have these in you code

.test{
background-color: blue;
}

.example {
@apply font-bold test
}

it now has to be converted to

// should be lowercase utility below but this editor keeps changing to capital?
@Utility test {
background-color: blue;
}

@Utility example{
@apply font-bold test
}

easiest way to accomplish this with old project is copy the css classes into utilities. This will also maintain specifity if you want to override primeng styleclass. If you don't want to do that just change the order in the css layer.

[makuko]

I think it's easiest to just use the layers that Tailwind already defines for us. Out of the box they provide an empty components layer that is meant exactly for what we need.

styles.css:

@import "tailwindcss";
@plugin "tailwindcss-primeui";

app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({eventCoalescing: true}),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          cssLayer: {
            name: 'components'
          },
        },
      },
    })
  ],
};

[JohnFredMeyer]

@makuko thats much cleaner and worked great for me. Didn't know about the @component layer

[AmrTarek7]

This problem appeared to me when I wrote this code in the style.scss file

problem is :

Unknown at rule @pluginscss(unknownAtRules)

🔹 style.scss:

@plugin 'tailwindcss-primeui';
@layer tailwind, primeng;

@layer tailwind {
  @import "tailwindcss";
}
}