Imported Tailwind and config to mix it with PrimeNG

src/app/app.config.ts

@@ -1,12 +1,24 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } 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';
-
-import { routes } from './app.routes';
+import Aura from '@primeng/themes/aura'; // Choisissez votre thème
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(),
-    providePrimeNG({ theme: { preset: Aura } })]
+  providers: [
+    provideRouter(routes),
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+        preset: Aura,
+        options: {
+          cssLayer: {
+            name: 'primeng',
+            order: 'tailwind-base, primeng, tailwind-utilities'
+          }
+        }
+      }
+    })
+  ]
 };

src/styles.css

@@ -1 +1,24 @@
-/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@import "primeicons/primeicons.css"; /* You can add global styles to this file, and also import other style files */
+/* Configuration des layers CSS pour garantir la priorité correcte */
+@layer tailwind-base, primeng, tailwind-utilities;
+
+@config "./tailwind.config.js";
+
+/* Import du plugin PrimeUI */
+
+/* Configuration des layers pour compatibilité PrimeNG */
+@layer tailwind-base {
+  /* Tailwind base styles */
+}
+
+@layer primeng {
+  /* PrimeNG s'injectera ici */
+}
+
+@layer tailwind-utilities {
+  /* Tailwind utilities s'injecteront ici */
+}
+
+/* Import des icônes PrimeNG */