How to make Angular 19+, PrimeNG 19+, and Tailwind 4+ work together?

Question

How to make Angular 19+, PrimeNG 19+, and Tailwind 4+ work together?

My configuration:

package.json

{  
  "name": "web",  
  "version": "0.0.0",  
  "scripts": {  
    "ng": "ng",  
    "start": "ng serve",  
    "build": "ng build",  
    "watch": "ng build --watch --configuration development",  
    "test": "ng test"  
  },  
  "private": true,  
  "dependencies": {  
    "@angular/animations": "^19.1.0",  
    "@angular/common": "^19.1.0",  
    "@angular/compiler": "^19.1.0",  
    "@angular/core": "^19.1.0",  
    "@angular/forms": "^19.1.0",  
    "@angular/platform-browser": "^19.1.0",  
    "@angular/platform-browser-dynamic": "^19.1.0",  
    "@angular/router": "^19.1.0",  
    "@primeng/themes": "^19.0.6",  
    "primeicons": "^7.0.0",  
    "primeng": "^19.0.9",  
    "rxjs": "~7.8.0",  
    "tailwindcss-primeui": "^0.5.1",  
    "tslib": "^2.3.0",  
    "zone.js": "~0.15.0"  
  },  
  "devDependencies": {  
    "@angular-devkit/build-angular": "^19.1.4",  
    "@angular/cli": "^19.1.4",  
    "@angular/compiler-cli": "^19.1.0",  
    "@tailwindcss/postcss": "^4.0.9",  
    "@types/jasmine": "~5.1.0",  
    "jasmine-core": "~5.5.0",  
    "karma": "~6.4.0",  
    "karma-chrome-launcher": "~3.2.0",  
    "karma-coverage": "~2.2.0",  
    "karma-jasmine": "~5.1.0",  
    "karma-jasmine-html-reporter": "~2.1.0",  
    "postcss": "^8.5.3",  
    "tailwindcss": "^4.0.9",  
    "typescript": "~5.7.2"  
  }  
}

angular.json

{  
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
  "version": 1,  
  "newProjectRoot": "projects",  
  "projects": {  
    "web": {  
      "projectType": "application",  
      "schematics": {},  
      "root": "",  
      "sourceRoot": "src",  
      "prefix": "app",  
      "architect": {  
        "build": {  
          "builder": "@angular-devkit/build-angular:application",  
          "options": {  
            "outputPath": "dist/web",  
            "index": "src/index.html",  
            "browser": "src/main.ts",  
            "polyfills": [  
              "zone.js"  
            ],  
            "tsConfig": "tsconfig.app.json",  
            "assets": [  
              {  
                "glob": "**/*",  
                "input": "public"  
              }  
            ],  
            "styles": [  
              "src/styles.scss",  
              "src/tailwind.css"  
            ],  
            "scripts": []  
          },  
          "configurations": {  
            "production": {  
              "budgets": [  
                {  
                  "type": "initial",  
                  "maximumWarning": "500kB",  
                  "maximumError": "1MB"  
                },  
                {  
                  "type": "anyComponentStyle",  
                  "maximumWarning": "4kB",  
                  "maximumError": "8kB"  
                }  
              ],  
              "outputHashing": "all"  
            },  
            "development": {  
              "optimization": false,  
              "extractLicenses": false,  
              "sourceMap": true  
            }  
          },  
          "defaultConfiguration": "production"  
        },  
        "serve": {  
          "builder": "@angular-devkit/build-angular:dev-server",  
          "configurations": {  
            "production": {  
              "buildTarget": "web:build:production"  
            },  
            "development": {  
              "buildTarget": "web:build:development"  
            }  
          },  
          "defaultConfiguration": "development"  
        },  
        "extract-i18n": {  
          "builder": "@angular-devkit/build-angular:extract-i18n"  
        },  
        "test": {  
          "builder": "@angular-devkit/build-angular:karma",  
          "options": {  
            "polyfills": [  
              "zone.js",  
              "zone.js/testing"  
            ],  
            "tsConfig": "tsconfig.spec.json",  
            "assets": [  
              {  
                "glob": "**/*",  
                "input": "public"  
              }  
            ],  
            "styles": [  
              "src/styles.css"  
            ],  
            "scripts": []  
          }  
        }  
      }  
    }  
  },  
  "schematics": {  
    "@schematics/angular:component": {  
      "style": "scss"  
    }  
  },  
  "cli": {  
    "analytics": "*"  
  }  
}

postcss.config.js

module.exports = {  
  plugins: {  
    "@tailwindcss/postcss": {}  
  },  
};

tailwind.config.js

module.exports = {  
  content: [  
    "./src/**/*.{html,ts,scss}"  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [  
    require('tailwindcss-primeui')  
  ]  
}

src/style.scss

...

src/tailwind.css

@import "tailwindcss-primeui";

@layer tailwind-base {
  @tailwind base;
}

@layer primeng {
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

src/app/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 AppPreset from './app.preset';  
  
export const appConfig: ApplicationConfig = {  
  providers: [  
    provideZoneChangeDetection({eventCoalescing: true}),  
    provideRouter(routes),  
    provideAnimationsAsync(),  
    providePrimeNG({  
      theme: {  
        preset: AppPreset,  
        options: {  
          cssLayer: {  
            name: 'primeng',  
            order: 'tailwind-base, primeng, tailwind-utilities'  
          }  
        }  
      },  
    })  
  ]  
};

When trying to run, I get an error:

ng serve

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

I've tried different configurations, tailwindcss: {}, removing some dependencies, clearing caches, but always the same problem.

Answer 1

TailwindCSS v4

Follow the playground provided by tailwindcss-primeui.

• tailwindcss-primeui with TailwindCSS v4

TailwindCSS v4 introduces several breaking changes. One of the most significant is the removal of support for Sass, Less, and Stylus preprocessors.

• Deprecated: Sass, Less and Stylus preprocessors support

Another change is the introduction of @import "tailwindcss";, which deprecates the use of all @tailwind directives, making their usage obsolete. If you want to implement v4 styles under multiple custom @layer, this is how you can do it:

• Removed @tailwind directives

@import "tailwindcss"; /* Although in your case, it's not ideal to import under layers */
@import "tailwindcss-primeui";

@layer tailwind-base {
  /* @tailwind base; - deprecated */
}

@layer primeng {
}

@layer tailwind-utilities {
  /* @tailwind components; - deprecated */
  /* @tailwind utilities; - deprecated */
}

To import into the appropriate layers, use it like this:

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

@import "tailwindcss-primeui";

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

@layer primeng {

}

However, according to the PrimeUI guide linked at the beginning of the answer, this should be sufficient:

• tailwindcss-primeui/tailwind.css with TailwindCSS v4

@import 'tailwindcss';
@import 'tailwindcss-primeui';

In TailwindCSS v4, the tailwind.config.js legacy JavaScript-based configuration has been removed. Instead, a CSS-first configuration has been introduced. However, it is still possible to use the legacy JavaScript-based configuration through the @config directive. See more:

• New CSS-first configuration option in v4
• TailwindCSS v4 is backwards compatible with v3

TailwindCSS v3

Follow the playground provided by tailwindcss-primeui.

• tailwindcss-primeui with TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3