migrate to Tailwind CSS v4

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>

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" />

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"

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">