From e4b334f58a6f0901196c56daf9a0bf04094441d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 9 Jul 2025 13:18:18 +0300
Subject: [PATCH] migrate to Tailwind CSS v4

---
 package-lock.json                              |  2 +-
 package.json                                   |  2 +-
 src/app/layout/component/app.configurator.ts   |  2 +-
 src/app/pages/auth/access.ts                   |  4 ++--
 src/app/pages/auth/error.ts                    |  4 ++--
 src/app/pages/auth/login.ts                    |  4 ++--
 .../components/notificationswidget.ts          | 12 ++++++------
 .../dashboard/components/recentsaleswidget.ts  |  2 +-
 .../components/revenuestreamwidget.ts          |  2 +-
 .../pages/dashboard/components/statswidget.ts  |  8 ++++----
 .../pages/landing/components/featureswidget.ts | 18 +++++++++---------
 src/app/pages/landing/components/herowidget.ts |  2 +-
 .../landing/components/highlightswidget.ts     |  6 +++---
 .../components/topbarwidget.component.ts       |  4 ++--
 src/app/pages/notfound/notfound.ts             |  6 +++---
 src/app/pages/uikit/panelsdemo.ts              |  6 +++---
 src/app/pages/uikit/tabledemo.ts               |  6 +++---
 17 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 168c465..5073b9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
                 "@angular/platform-browser-dynamic": "^20",
                 "@angular/router": "^20",
                 "@primeuix/themes": "^1.2.1",
-                "@tailwindcss/postcss": "^4.1.4",
+                "@tailwindcss/postcss": "^4.1.11",
                 "chart.js": "4.4.2",
                 "primeclt": "^0.1.5",
                 "primeicons": "^7.0.0",
diff --git a/package.json b/package.json
index eeb2cc1..e66a018 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
         "@angular/platform-browser-dynamic": "^20",
         "@angular/router": "^20",
         "@primeuix/themes": "^1.2.1",
-        "@tailwindcss/postcss": "^4.1.4",
+        "@tailwindcss/postcss": "^4.1.11",
         "chart.js": "4.4.2",
         "primeclt": "^0.1.5",
         "primeicons": "^7.0.0",
diff --git a/src/app/layout/component/app.configurator.ts b/src/app/layout/component/app.configurator.ts
index 75d28c3..482ceee 100644
--- a/src/app/layout/component/app.configurator.ts
+++ b/src/app/layout/component/app.configurator.ts
@@ -87,7 +87,7 @@ declare type SurfacesType = {
         </div>
     `,
     host: {
-        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
+        class: 'hidden absolute top-13 right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
     }
 })
 export class AppConfigurator {
diff --git a/src/app/pages/auth/access.ts b/src/app/pages/auth/access.ts
index 1f8c8a9..4c62f2d 100644
--- a/src/app/pages/auth/access.ts
+++ b/src/app/pages/auth/access.ts
@@ -9,13 +9,13 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
     standalone: true,
     imports: [ButtonModule, RouterModule, RippleModule, AppFloatingConfigurator, ButtonModule],
     template: ` <app-floating-configurator />
-        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
             <div class="flex flex-col items-center justify-center">
                 <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
                     <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
                         <div class="gap-4 flex flex-col items-center">
                             <div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
-                                <i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
+                                <i class="text-orange-500 pi pi-fw pi-lock text-2xl!"></i>
                             </div>
                             <h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
                             <span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
diff --git a/src/app/pages/auth/error.ts b/src/app/pages/auth/error.ts
index 736cb49..d3fc6f2 100644
--- a/src/app/pages/auth/error.ts
+++ b/src/app/pages/auth/error.ts
@@ -9,13 +9,13 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
     imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
     standalone: true,
     template: ` <app-floating-configurator />
-        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
             <div class="flex flex-col items-center justify-center">
                 <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
                     <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
                         <div class="gap-4 flex flex-col items-center">
                             <div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
-                                <i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
+                                <i class="pi pi-fw pi-exclamation-circle text-2xl! text-pink-500"></i>
                             </div>
                             <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
                             <span class="text-muted-color mb-8">Requested resource is not available.</span>
diff --git a/src/app/pages/auth/login.ts b/src/app/pages/auth/login.ts
index 8385294..0b48f0a 100644
--- a/src/app/pages/auth/login.ts
+++ b/src/app/pages/auth/login.ts
@@ -14,7 +14,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
     imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
     template: `
         <app-floating-configurator />
-        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+        <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
             <div class="flex flex-col items-center justify-center">
                 <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                     <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
@@ -42,7 +42,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
 
                         <div>
                             <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
-                            <input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" [(ngModel)]="email" />
+                            <input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-120 mb-8" [(ngModel)]="email" />
 
                             <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
                             <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="mb-4" [fluid]="true" [feedback]="false"></p-password>
diff --git a/src/app/pages/dashboard/components/notificationswidget.ts b/src/app/pages/dashboard/components/notificationswidget.ts
index 445060b..4ec00aa 100644
--- a/src/app/pages/dashboard/components/notificationswidget.ts
+++ b/src/app/pages/dashboard/components/notificationswidget.ts
@@ -19,7 +19,7 @@ import { MenuModule } from 'primeng/menu';
         <ul class="p-0 mx-0 mt-0 mb-6 list-none">
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                    <i class="pi pi-dollar text-xl! text-blue-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"
                     >Richard Jones
@@ -28,7 +28,7 @@ import { MenuModule } from 'primeng/menu';
             </li>
             <li class="flex items-center py-2">
                 <div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-download !text-xl text-orange-500"></i>
+                    <i class="pi pi-download text-xl! text-orange-500"></i>
                 </div>
                 <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
             </li>
@@ -38,7 +38,7 @@ import { MenuModule } from 'primeng/menu';
         <ul class="p-0 m-0 list-none mb-6">
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                    <i class="pi pi-dollar text-xl! text-blue-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"
                     >Keyser Wick
@@ -47,7 +47,7 @@ import { MenuModule } from 'primeng/menu';
             </li>
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-pink-100 dark:bg-pink-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-question !text-xl text-pink-500"></i>
+                    <i class="pi pi-question text-xl! text-pink-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"
                     >Jane Davis
@@ -59,13 +59,13 @@ import { MenuModule } from 'primeng/menu';
         <ul class="p-0 m-0 list-none">
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-green-100 dark:bg-green-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-arrow-up !text-xl text-green-500"></i>
+                    <i class="pi pi-arrow-up text-xl! text-green-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
             </li>
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-heart !text-xl text-purple-500"></i>
+                    <i class="pi pi-heart text-xl! text-purple-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
             </li>
diff --git a/src/app/pages/dashboard/components/recentsaleswidget.ts b/src/app/pages/dashboard/components/recentsaleswidget.ts
index 6859ffa..8327784 100644
--- a/src/app/pages/dashboard/components/recentsaleswidget.ts
+++ b/src/app/pages/dashboard/components/recentsaleswidget.ts
@@ -9,7 +9,7 @@ import { Product, ProductService } from '../../service/product.service';
     standalone: true,
     selector: 'app-recent-sales-widget',
     imports: [CommonModule, TableModule, ButtonModule, RippleModule],
-    template: `<div class="card !mb-8">
+    template: `<div class="card mb-8!">
         <div class="font-semibold text-xl mb-4">Recent Sales</div>
         <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
             <ng-template #header>
diff --git a/src/app/pages/dashboard/components/revenuestreamwidget.ts b/src/app/pages/dashboard/components/revenuestreamwidget.ts
index 23334f2..afff2df 100644
--- a/src/app/pages/dashboard/components/revenuestreamwidget.ts
+++ b/src/app/pages/dashboard/components/revenuestreamwidget.ts
@@ -7,7 +7,7 @@ import { LayoutService } from '../../../layout/service/layout.service';
     standalone: true,
     selector: 'app-revenue-stream-widget',
     imports: [ChartModule],
-    template: `<div class="card !mb-8">
+    template: `<div class="card mb-8!">
         <div class="font-semibold text-xl mb-4">Revenue Stream</div>
         <p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-100" />
     </div>`
diff --git a/src/app/pages/dashboard/components/statswidget.ts b/src/app/pages/dashboard/components/statswidget.ts
index bfd58b3..e9bf7db 100644
--- a/src/app/pages/dashboard/components/statswidget.ts
+++ b/src/app/pages/dashboard/components/statswidget.ts
@@ -13,7 +13,7 @@ import { CommonModule } from '@angular/common';
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
                     </div>
                     <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
+                        <i class="pi pi-shopping-cart text-blue-500 text-xl!"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">24 new </span>
@@ -28,7 +28,7 @@ import { CommonModule } from '@angular/common';
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
                     </div>
                     <div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-dollar text-orange-500 !text-xl"></i>
+                        <i class="pi pi-dollar text-orange-500 text-xl!"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">%52+ </span>
@@ -43,7 +43,7 @@ import { CommonModule } from '@angular/common';
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
                     </div>
                     <div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-users text-cyan-500 !text-xl"></i>
+                        <i class="pi pi-users text-cyan-500 text-xl!"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">520 </span>
@@ -58,7 +58,7 @@ import { CommonModule } from '@angular/common';
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
                     </div>
                     <div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-comment text-purple-500 !text-xl"></i>
+                        <i class="pi pi-comment text-purple-500 text-xl!"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">85 </span>
diff --git a/src/app/pages/landing/components/featureswidget.ts b/src/app/pages/landing/components/featureswidget.ts
index 2be5620..68a459f 100644
--- a/src/app/pages/landing/components/featureswidget.ts
+++ b/src/app/pages/landing/components/featureswidget.ts
@@ -16,7 +16,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-users !text-2xl text-yellow-700"></i>
+                            <i class="pi pi-fw pi-users text-2xl! text-yellow-700"></i>
                         </div>
                         <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
                         <span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
@@ -28,7 +28,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-palette !text-2xl text-cyan-700"></i>
+                            <i class="pi pi-fw pi-palette text-2xl! text-cyan-700"></i>
                         </div>
                         <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
                         <span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
@@ -40,7 +40,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-map !text-2xl text-indigo-700"></i>
+                            <i class="pi pi-fw pi-map text-2xl! text-indigo-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Well Documented</div>
                         <span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
@@ -52,7 +52,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-id-card !text-2xl text-slate-700"></i>
+                            <i class="pi pi-fw pi-id-card text-2xl! text-slate-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Responsive Layout</div>
                         <span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
@@ -64,7 +64,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-star !text-2xl text-orange-700"></i>
+                            <i class="pi pi-fw pi-star text-2xl! text-orange-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Clean Code</div>
                         <span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
@@ -76,7 +76,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-moon !text-2xl text-pink-700"></i>
+                            <i class="pi pi-fw pi-moon text-2xl! text-pink-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Dark Mode</div>
                         <span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
@@ -88,7 +88,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-shopping-cart !text-2xl text-teal-700"></i>
+                            <i class="pi pi-fw pi-shopping-cart text-2xl! text-teal-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Ready to Use</div>
                         <span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
@@ -100,7 +100,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-globe !text-2xl text-blue-700"></i>
+                            <i class="pi pi-fw pi-globe text-2xl! text-blue-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Modern Practices</div>
                         <span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
@@ -112,7 +112,7 @@ import { CommonModule } from '@angular/common';
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-eye !text-2xl text-purple-700"></i>
+                            <i class="pi pi-fw pi-eye text-2xl! text-purple-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Privacy</div>
                         <span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
diff --git a/src/app/pages/landing/components/herowidget.ts b/src/app/pages/landing/components/herowidget.ts
index 754f66b..4f00ad0 100644
--- a/src/app/pages/landing/components/herowidget.ts
+++ b/src/app/pages/landing/components/herowidget.ts
@@ -14,7 +14,7 @@ import { RippleModule } from 'primeng/ripple';
             <div class="mx-6 md:mx-20 mt-0 md:mt-6">
                 <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
                 <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
-                <button pButton pRipple [rounded]="true" type="button" label="Get Started" class="!text-xl mt-8 !px-4"></button>
+                <button pButton pRipple [rounded]="true" type="button" label="Get Started" class="text-xl! mt-8 px-4!"></button>
             </div>
             <div class="flex justify-center md:justify-end">
                 <img src="https://primefaces.org/cdn/templates/sakai/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
diff --git a/src/app/pages/landing/components/highlightswidget.ts b/src/app/pages/landing/components/highlightswidget.ts
index d4b8804..8e80e2d 100644
--- a/src/app/pages/landing/components/highlightswidget.ts
+++ b/src/app/pages/landing/components/highlightswidget.ts
@@ -10,13 +10,13 @@ import { Component } from '@angular/core';
             </div>
 
             <div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
-                <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
+                <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-0" style="border-radius: 8px">
                     <img src="https://primefaces.org/cdn/templates/sakai/landing/mockup.png" class="w-11/12" alt="mockup mobile" />
                 </div>
 
                 <div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4">
                     <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                        <i class="pi pi-fw pi-mobile !text-4xl text-purple-700"></i>
+                        <i class="pi pi-fw pi-mobile text-4xl! text-purple-700"></i>
                     </div>
                     <div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Congue Quisque Egestas</div>
                     <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
             <div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
                 <div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4">
                     <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                        <i class="pi pi-fw pi-desktop !text-3xl text-yellow-700"></i>
+                        <i class="pi pi-fw pi-desktop text-3xl! text-yellow-700"></i>
                     </div>
                     <div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Celerisque Eu Ultrices</div>
                     <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
diff --git a/src/app/pages/landing/components/topbarwidget.component.ts b/src/app/pages/landing/components/topbarwidget.component.ts
index 559ae20..8d27181 100644
--- a/src/app/pages/landing/components/topbarwidget.component.ts
+++ b/src/app/pages/landing/components/topbarwidget.component.ts
@@ -28,8 +28,8 @@ import { ButtonModule } from 'primeng/button';
             <span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span>
         </a>
 
-        <a pButton [text]="true" severity="secondary" [rounded]="true" pRipple class="lg:!hidden" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
-            <i class="pi pi-bars !text-2xl"></i>
+        <a pButton [text]="true" severity="secondary" [rounded]="true" pRipple class="lg:hidden!" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
+            <i class="pi pi-bars text-2xl!"></i>
         </a>
 
         <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border">
diff --git a/src/app/pages/notfound/notfound.ts b/src/app/pages/notfound/notfound.ts
index 856887b..07ef44a 100644
--- a/src/app/pages/notfound/notfound.ts
+++ b/src/app/pages/notfound/notfound.ts
@@ -34,7 +34,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
                         <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
                         <a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
                             <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                                <i class="pi pi-fw pi-table !text-2xl"></i>
+                                <i class="pi pi-fw pi-table text-2xl!"></i>
                             </span>
                             <span class="ml-6 flex flex-col">
                                 <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
@@ -43,7 +43,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
                         </a>
                         <a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
                             <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                                <i class="pi pi-fw pi-question-circle !text-2xl"></i>
+                                <i class="pi pi-fw pi-question-circle text-2xl!"></i>
                             </span>
                             <span class="ml-6 flex flex-col">
                                 <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
@@ -52,7 +52,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
                         </a>
                         <a routerLink="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
                             <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                                <i class="pi pi-fw pi-unlock !text-2xl"></i>
+                                <i class="pi pi-fw pi-unlock text-2xl!"></i>
                             </span>
                             <span class="ml-6 flex flex-col">
                                 <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
diff --git a/src/app/pages/uikit/panelsdemo.ts b/src/app/pages/uikit/panelsdemo.ts
index e6d9849..d5d512a 100644
--- a/src/app/pages/uikit/panelsdemo.ts
+++ b/src/app/pages/uikit/panelsdemo.ts
@@ -176,8 +176,8 @@ import { ToolbarModule } from 'primeng/toolbar';
                         </div>
                     </div>
                     <div class="w-full md:w-2/12">
-                        <p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
-                        <p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
+                        <p-divider layout="vertical" class="hidden! md:flex!"><b>OR</b></p-divider>
+                        <p-divider layout="horizontal" class="flex! md:hidden!" align="center"><b>OR</b></p-divider>
                     </div>
                     <div class="w-full md:w-5/12 flex items-center justify-center py-5">
                         <p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full" styleClass="w-full max-w-[17.35rem] mx-auto"></p-button>
@@ -194,7 +194,7 @@ import { ToolbarModule } from 'primeng/toolbar';
                     <ng-template #panel>
                         <p-splitter layout="vertical" [panelSizes]="[50, 50]">
                             <ng-template #panel>
-                                <div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
+                                <div style="grow: 1;" class="flex items-center justify-center">Panel 2</div>
                             </ng-template>
                             <ng-template #panel>
                                 <p-splitter [panelSizes]="[20, 80]">
diff --git a/src/app/pages/uikit/tabledemo.ts b/src/app/pages/uikit/tabledemo.ts
index daa8854..8a87bd5 100644
--- a/src/app/pages/uikit/tabledemo.ts
+++ b/src/app/pages/uikit/tabledemo.ts
@@ -177,13 +177,13 @@ interface expandedRows {
                             {{ customer.balance | currency: 'USD' : 'symbol' }}
                         </td>
                         <td>
-                            <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
+                            <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:bg-surface-900!" />
                         </td>
                         <td>
                             <p-progressbar [value]="customer.activity" [showValue]="false" [style]="{ height: '0.5rem' }" />
                         </td>
                         <td class="text-center">
-                            <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
+                            <p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:bg-surface-900!" />
                         </td>
                     </tr>
                 </ng-template>
@@ -282,7 +282,7 @@ interface expandedRows {
                             <p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
                         </td>
                         <td>
-                            <p-tag [value]="product.inventoryStatus.toLowerCase()" [severity]="getSeverity(product.inventoryStatus)" styleClass="dark:!bg-surface-900" />
+                            <p-tag [value]="product.inventoryStatus.toLowerCase()" [severity]="getSeverity(product.inventoryStatus)" styleClass="dark:bg-surface-900!" />
                         </td>
                     </tr>
                 </ng-template>