diff --git a/apps/showcase/doc/carousel/basicdoc.ts b/apps/showcase/doc/carousel/basicdoc.ts
index bbe4ff6a35..28c4b7aa30 100644
--- a/apps/showcase/doc/carousel/basicdoc.ts
+++ b/apps/showcase/doc/carousel/basicdoc.ts
@@ -17,7 +17,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
                         <div class="mb-4">
                             <div class="relative mx-auto">
                                 <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
-                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
                             </div>
                         </div>
                         <div class="mb-4 font-medium">{{ product.name }}</div>
@@ -47,7 +47,7 @@ export class BasicDoc implements OnInit {
             <div class="mb-4">
                 <div class="relative mx-auto">
                     <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
-                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
                 </div>
             </div>
             <div class="mb-4 font-medium">{{ product.name }}</div>
@@ -68,7 +68,7 @@ export class BasicDoc implements OnInit {
                 <div class="mb-4">
                     <div class="relative mx-auto">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
-                        <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+                        <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
                     </div>
                 </div>
                 <div class="mb-4 font-medium">{{ product.name }}</div>