Skip to content

Update to Tailwind v4 #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
antoniomacri wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Update to Tailwind v4 #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d2e2f63
Move tailwindcss from devDependencies to dependencies
May 20, 2025
2fe3bba
Run `npx @tailwindcss/upgrade`
May 20, 2025
80fbfaa
Add and configure PostCSS
May 20, 2025
dbb66df
Move tailwindcss back to devDependencies
May 20, 2025
363735d
Load tailwindcss-primeui plugin
antoniomacri Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .postcssrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
6,609 changes: 3,284 additions & 3,325 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"@angular-devkit/build-angular": "^19.0.6",
"@angular/cli": "^19.0.6",
"@angular/compiler-cli": "^19.0.0",
"@tailwindcss/postcss": "^4.1.7",
"@types/jasmine": "~5.1.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.14.0",
Expand All @@ -48,7 +49,7 @@
"karma-jasmine-html-reporter": "~2.1.0",
"postcss": "^8.4.49",
"prettier": "^3.0.0",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.1.7",
"typescript": "~5.6.2"
}
}
2 changes: 1 addition & 1 deletion src/app/layout/component/app.configurator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/app/pages/auth/access.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/app/pages/auth/error.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/app/pages/auth/login.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/app/pages/dashboard/components/notificationswidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/dashboard/components/recentsaleswidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/dashboard/components/revenuestreamwidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-80" />
</div>`
Expand Down
8 changes: 4 additions & 4 deletions src/app/pages/dashboard/components/statswidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading