Update messages and add line-height

src/app/pages/uikit/messagesdemo.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MessageService, ToastMessageOptions } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
-import { ToastModule } from 'primeng/toast';
 import { MessageModule } from 'primeng/message';
-import { FormsModule } from '@angular/forms';
+import { ToastModule } from 'primeng/toast';
 
 @Component({
     selector: 'app-messages-demo',
@@ -25,13 +25,13 @@ import { FormsModule } from '@angular/forms';
                     </div>
 
                     <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
-                    <div class="flex flex-wrap mb-4 gap-2">
+                    <div class="flex flex-col mb-4 gap-1">
                         <input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid" />
-                        <p-message severity="error">Username is required</p-message>
+                        <p-message severity="error" variant="simple" size="small">Username is required</p-message>
                     </div>
-                    <div class="flex flex-wrap gap-2">
+                    <div class="flex flex-col flex-wrap gap-1">
                         <input pInputText [(ngModel)]="email" placeholder="Email" aria-label="email" class="ng-dirty ng-invalid" />
-                        <p-message severity="error" icon="pi pi-times-circle" />
+                        <p-message severity="error" variant="simple" size="small">Email is required</p-message>
                     </div>
                 </div>
             </div>

src/app/pages/uikit/miscdemo.ts

@@ -1,16 +1,16 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { ProgressBarModule } from 'primeng/progressbar';
+import { AvatarModule } from 'primeng/avatar';
 import { AvatarGroupModule } from 'primeng/avatargroup';
-import { CommonModule } from '@angular/common';
-import { ScrollTopModule } from 'primeng/scrolltop';
-import { SkeletonModule } from 'primeng/skeleton';
 import { BadgeModule } from 'primeng/badge';
-import { AvatarModule } from 'primeng/avatar';
-import { ScrollPanelModule } from 'primeng/scrollpanel';
-import { TagModule } from 'primeng/tag';
-import { ChipModule } from 'primeng/chip';
 import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
 import { OverlayBadgeModule } from 'primeng/overlaybadge';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { ScrollTopModule } from 'primeng/scrolltop';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TagModule } from 'primeng/tag';
 
 @Component({
     selector: 'app-misc-demo',
@@ -136,7 +136,7 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                         <p-tag icon="pi pi-user" value="Primary"></p-tag>
                         <p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
                         <p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
-                        <p-tag con="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
+                        <p-tag icon="pi pi-exclamation-triangle" severity="warn" value="Warning"></p-tag>
                         <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
                     </div>
                 </div>

src/assets/layout/_core.scss

@@ -12,6 +12,7 @@ body {
     min-height: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    line-height: 1.2;
 }
 
 a {

src/styles.scss

@@ -1,8 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@use './tailwind.css';
 @use './assets/layout/layout.scss';
 @use 'primeicons/primeicons.css';
 @use './assets/demo/demo.scss';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;