From ef69153da7cfef95a18198656d37a4d3805ac704 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 7 Aug 2025 10:59:52 +0300
Subject: [PATCH 01/11] feat(styling): add tailwind styling samples

---
 ...dge-tailwind-styling-sample.component.html | 18 +++++++
 ...dge-tailwind-styling-sample.component.scss |  1 +
 ...badge-tailwind-styling-sample.component.ts | 19 +++++++
 .../badge-tailwind-styling-sample/layout.scss | 18 +++++++
 .../chip-tailwind-styling.component.html      | 25 +++++++++
 .../chip-tailwind-styling.component.scss      |  1 +
 .../chip-tailwind-styling.component.ts        | 52 +++++++++++++++++++
 .../chip/chip-tailwind-styling/layout.scss    |  4 ++
 .../data-display/data-display-routes-data.ts  |  2 +
 src/app/data-display/data-display.routes.ts   | 12 +++++
 ...button-group-tailwind-style.component.html |  8 +++
 ...button-group-tailwind-style.component.scss |  0
 .../button-group-tailwind-style.component.ts  | 11 ++++
 .../buttons-tailwind-style.component.html     | 14 +++++
 .../buttons-tailwind-style.component.scss     |  1 +
 .../buttons-tailwind-style.component.ts       | 10 ++++
 .../buttons-tailwind-style/layout.scss        |  9 ++++
 .../checkbox-tailwind-styling.component.html  |  3 ++
 .../checkbox-tailwind-styling.component.scss  |  0
 .../checkbox-tailwind-styling.component.ts    | 10 ++++
 .../data-entries/data-entries-routes-data.ts  |  3 ++
 src/app/data-entries/data-entries.routes.ts   | 18 +++++++
 .../avatar-tailwind-styling.component.html    |  1 +
 .../avatar-tailwind-styling.component.scss    |  3 ++
 .../avatar-tailwind-styling.component.ts      | 11 ++++
 ...ard-tailwind-styling-sample.component.html | 28 ++++++++++
 ...ard-tailwind-styling-sample.component.scss |  1 +
 .../card-tailwind-styling-sample.component.ts | 25 +++++++++
 .../card-tailwind-styling-sample/layout.scss  |  4 ++
 src/app/layouts/layouts-routes-data.ts        |  3 ++
 src/app/layouts/layouts.routes.ts             | 18 +++++++
 .../tabbar/tabbar-tailwind-style/layout.scss  | 21 ++++++++
 .../tabbar-tailwind-style.component.html      | 44 ++++++++++++++++
 .../tabbar-tailwind-style.component.scss      |  1 +
 .../tabbar-tailwind-style.component.ts        | 35 +++++++++++++
 ...dar-tailwind-styling-sample.component.html |  4 ++
 ...dar-tailwind-styling-sample.component.scss |  1 +
 ...endar-tailwind-styling-sample.component.ts | 10 ++++
 .../layout.scss                               | 12 +++++
 src/app/scheduling/scheduling-routes-data.ts  |  1 +
 src/app/scheduling/scheduling.routes.ts       |  6 +++
 41 files changed, 468 insertions(+)
 create mode 100644 src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
 create mode 100644 src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss
 create mode 100644 src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
 create mode 100644 src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss
 create mode 100644 src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
 create mode 100644 src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss
 create mode 100644 src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts
 create mode 100644 src/app/data-display/chip/chip-tailwind-styling/layout.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.scss
 create mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
 create mode 100644 src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
 create mode 100644 src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.scss
 create mode 100644 src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.ts
 create mode 100644 src/app/data-entries/buttons/buttons-tailwind-style/layout.scss
 create mode 100644 src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
 create mode 100644 src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss
 create mode 100644 src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
 create mode 100644 src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
 create mode 100644 src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
 create mode 100644 src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.ts
 create mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
 create mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss
 create mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts
 create mode 100644 src/app/layouts/card/card-tailwind-styling-sample/layout.scss
 create mode 100644 src/app/layouts/tabbar/tabbar-tailwind-style/layout.scss
 create mode 100644 src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
 create mode 100644 src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.scss
 create mode 100644 src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.ts
 create mode 100644 src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
 create mode 100644 src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.scss
 create mode 100644 src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.ts
 create mode 100644 src/app/scheduling/calendar/calendar-tailwind-styling-sample/layout.scss

diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..ec1728048c
--- /dev/null
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
@@ -0,0 +1,18 @@
+<igx-list>
+  <igx-list-item [isHeader]="true">
+    Team Members (4)
+  </igx-list-item>
+  @for (member of members; track member) {
+    <igx-list-item>
+      <div class="wrapper">
+        <div>
+          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !material-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
+        </div>
+        <div class="contact-container">
+          <span class="contact-name">{{ member.name }}</span>
+        </div>
+      </div>
+    </igx-list-item>
+  }
+</igx-list>
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..e1147f6ff5
--- /dev/null
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Member } from '../model/member.model';
+import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-badge-tailwind-styling-sample',
+    styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
+    templateUrl: './badge-tailwind-styling-sample.component.html',
+    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeTailwindStylingSampleComponent {
+  public members: Member[] = [
+    new Member('Terrance Orta', 'online'),
+    new Member('Donna Price', 'online'),
+    new Member('Lisa Landers', 'away'),
+    new Member('Dorothy H. Spencer', 'offline')
+  ];
+}
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss b/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss
new file mode 100644
index 0000000000..cee5eb7fb1
--- /dev/null
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss
@@ -0,0 +1,18 @@
+.wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .contact-name {
+    font-weight: 600;
+  }
+  
+  .contact-container{
+    margin-left: 20px;
+  }
+  
+  .badge-style {
+    position: absolute;
+    bottom: 2.5px;
+    left: 40px;
+  }
\ No newline at end of file
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
new file mode 100644
index 0000000000..bda3e01f65
--- /dev/null
+++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
@@ -0,0 +1,25 @@
+<igx-chips-area (reorder)="chipsOrderChanged($event)">
+  @for (chip of chipList; track chip) {
+    <igx-chip
+      class="!material-chip-color-[#99BAA6]
+      ![--remove-icon-color:#C92828]"
+      [id]="chip.id"
+      [selectable]="true"
+      [selectIcon]="mySelectIcon"
+      [removable]="true"
+      [removeIcon]="myRemoveIcon"
+      (remove)="chipRemoved($event)"
+      [draggable]="true">
+      <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
+      {{chip.text}}
+    </igx-chip>
+  }
+</igx-chips-area>
+
+<ng-template #mySelectIcon>
+  <igx-icon>check_circle</igx-icon>
+</ng-template>
+
+<ng-template #myRemoveIcon>
+  <igx-icon>delete</igx-icon>
+</ng-template>
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts
new file mode 100644
index 0000000000..89c115470f
--- /dev/null
+++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts
@@ -0,0 +1,52 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-chip-tailwind-styling',
+    styleUrls: ['./chip-tailwind-styling.component.scss'],
+    templateUrl: './chip-tailwind-styling.component.html',
+    imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+
+export class ChipTailwindStylingSampleComponent {
+    changeDetectionRef = inject(ChangeDetectorRef);
+
+    public chipList = [
+        {
+           text: 'Country',
+           id: '1',
+           icon: 'place'
+        },
+        {
+            text: 'City',
+            id: '2',
+            icon: 'location_city'
+        },
+        {
+            text: 'Town',
+            id: '3',
+            icon: 'store'
+        },
+        {
+            text: 'First Name',
+            id: '4',
+            icon: 'person_pin'
+        }
+    ];
+
+
+    public chipRemoved(event: IBaseChipEventArgs) {
+        this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
+        this.changeDetectionRef.detectChanges();
+    }
+
+    public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
+        const newChipList = [];
+        for (const chip of event.chipsArray) {
+            const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
+            newChipList.push(chipItem);
+        }
+        this.chipList = newChipList;
+    }
+}
diff --git a/src/app/data-display/chip/chip-tailwind-styling/layout.scss b/src/app/data-display/chip/chip-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..619dc177ee
--- /dev/null
+++ b/src/app/data-display/chip/chip-tailwind-styling/layout.scss
@@ -0,0 +1,4 @@
+igx-chip {
+  margin-right: 5px;
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 7c3af92490..e69a6faa88 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -5,9 +5,11 @@ export const dataDisplayRoutesData = {
     "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
     "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
     "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
+    "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
     "chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
+    "chip-tailwind-styling": { displayName: "Chip Tailwind Styling", parentName: "Chip" },
     "circular-progressbar": { displayName: "Circular Progressbar Sample", parentName: "Circular Progressbar" },
     "circular-dynamic-sample": { displayName: "Circular Dynamic Sample", parentName: "Circular Progressbar" },
     // tslint:disable-next-line:max-line-length
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index c5498f092c..5b350c6b4a 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -2,9 +2,11 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
 import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
 import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component';
+import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
 import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component';
+import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component';
 import { CircularDynamicSampleComponent } from './circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component';
 // eslint-disable-next-line max-len
 import { CircularIndeterminateProgressbarComponent } from './circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component';
@@ -63,6 +65,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-styling-sample'],
         path: 'badge-styling-sample'
     },
+    {
+        component: BadgeTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['badge-tailwind-styling-sample'],
+        path: 'badge-tailwind-styling-sample'
+    },
     {
         component: ChipAreaSampleComponent,
         data: dataDisplayRoutesData['chip-area-sample'],
@@ -213,6 +220,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-styling'],
         path: 'chip-styling'
     },
+    {
+        component: ChipTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['chip-tailwind-styling'],
+        path: 'chip-tailwind-styling'
+    },
     {
         component: MaterialSymbolsComponent,
         data: dataDisplayRoutesData['material-symbols'],
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
new file mode 100644
index 0000000000..0b8da33d47
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
@@ -0,0 +1,8 @@
+<article class="sample-column">
+    <igx-buttongroup class="!material-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
+        <button igxButton igxRipple="white">Sofia</button>
+        <button igxButton igxRipple="white">London</button>
+        <button igxButton igxRipple="white">New York</button>
+        <button igxButton igxRipple="white" disabled>Tokyo</button>
+    </igx-buttongroup>
+</article>
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
new file mode 100644
index 0000000000..6f28e522cf
--- /dev/null
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-button-group-tailwind-style',
+    styleUrls: ['./button-group-tailwind-style.component.scss'],
+    templateUrl: './button-group-tailwind-style.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupTailwindStyleComponent {
+}
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
new file mode 100644
index 0000000000..eb9d5e233d
--- /dev/null
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
@@ -0,0 +1,14 @@
+<div class="buttons-sample">
+  <div class="button-sample">
+    <button igxButton="flat" class="!material-flat-button-color-[#7B9E89]">Flat Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="contained" class="!material-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="outlined" class="!material-outlined-button-color-[#7B9E89]">Outlined Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="fab" class="!material-fab-button-color-[#7B9E89]">Fab Button</button>
+  </div>
+</div>
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.scss b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.ts b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.ts
new file mode 100644
index 0000000000..4b1e6bb693
--- /dev/null
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-buttons-tailwind-style',
+    styleUrls: ['./buttons-tailwind-style.component.scss'],
+    templateUrl: './buttons-tailwind-style.component.html',
+    imports: [IgxButtonDirective]
+})
+export class ButtonsTailwindStyleComponent {}
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/layout.scss b/src/app/data-entries/buttons/buttons-tailwind-style/layout.scss
new file mode 100644
index 0000000000..36396d2d00
--- /dev/null
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/layout.scss
@@ -0,0 +1,9 @@
+.buttons-sample {
+  display: flex;
+  margin: 8px;
+}
+
+.button-sample {
+  display: flex;
+  margin-right: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
new file mode 100644
index 0000000000..00c63667f5
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
@@ -0,0 +1,3 @@
+<igx-checkbox class="!material-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
+    Styled checkbox
+</igx-checkbox>
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
new file mode 100644
index 0000000000..996d7518e0
--- /dev/null
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxCheckboxComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-checkbox-tailwind-styling',
+    styleUrls: ['./checkbox-tailwind-styling.component.scss'],
+    templateUrl: './checkbox-tailwind-styling.component.html',
+    imports: [IgxCheckboxComponent]
+})
+export class CheckboxTailwindStylingComponent { }
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index b0dd678fe0..cd5f3228c5 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -9,6 +9,7 @@ export const dataEntriesRoutesData = {
     "button-group-sample-4": { displayName: "Selection Mode", parentName: "Button Group" },
     "button-group-sample-5": { displayName: "Display Density", parentName: "Button Group" },
     "button-group-style": { displayName: "Button Group Style", parentName: "Button Group" },
+    "button-group-tailwind-style": { displayName: "Button Group Tailwind Style", parentName: "Button Group" },
     "buttons-sample-1": { displayName: "Overview", parentName: "Buttons" },
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
@@ -21,10 +22,12 @@ export const dataEntriesRoutesData = {
     "buttons-display-density": { displayName: "Display Density", parentName: "Buttons" },
     "buttons-roundness-sample": { displayName: "Components Roundness", parentName: "Buttons" },
     "buttons-style": { displayName: "Button Style", parentName: "Buttons" },
+    "buttons-tailwind-style": { displayName: "Button Tailwind Style", parentName: "Buttons" },
     "checkbox-sample-1": { displayName: "Simple Checkbox", parentName: "Checkbox" },
     "checkbox-sample-2": { displayName: "Multiple Checkboxes", parentName: "Checkbox" },
     "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" },
     "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" },
+    "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" },
     "dropdown-remote": { displayName: "Virtual Dropdown - Remote Data", parentName: "Dropdown" },
     "dropdown-virtual": { displayName: "Virtual Dropdown", parentName: "Dropdown" },
     "dropdown-menu": { displayName: "Dropdown as Menu", parentName: "Dropdown" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index ad5a639c84..d42a047513 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -7,6 +7,7 @@ import { ButtonGroupSample3Component } from './buttonGroup/button-group-sample-3
 import { ButtonGroupSampleComponent } from './buttonGroup/button-group-sample-4/button-group-sample.component';
 import { ButtonGroupSample5Component } from './buttonGroup/button-group-sample-5/button-group-sample-5.component';
 import { ButtonGroupStyleComponent } from './buttonGroup/button-group-style/button-group-style.component';
+import { ButtonGroupTailwindStyleComponent } from './buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component';
 import { ButtonsDisabledComponent } from './buttons/buttons-disabled-sample/buttons-disabled-sample';
 import { ButtonsDisplayDensityComponent } from './buttons/buttons-display-density/buttons-display-density.component';
 import { ButtonsRoundnessComponent } from './buttons/buttons-roundness-sample/buttons-roundness-sample';
@@ -19,10 +20,12 @@ import { ButtonsSample6Component } from './buttons/buttons-sample-6/buttons-samp
 import { ButtonsSample7Component } from './buttons/buttons-sample-7/buttons-sample-7.component';
 import { ButtonsSample8Component } from './buttons/buttons-sample-8/buttons-sample-8.component';
 import { ButtonsStyleComponent } from './buttons/buttons-style/buttons-style.component';
+import { ButtonsTailwindStyleComponent } from './buttons/buttons-tailwind-style/buttons-tailwind-style.component';
 import { CheckboxSample1Component } from './checkbox/checkbox-sample-1/checkbox-sample-1.component';
 import { CheckboxSample2Component } from './checkbox/checkbox-sample-2/checkbox-sample-2.component';
 import { CheckboxSample3Component } from './checkbox/checkbox-sample-3/checkbox-sample-3.component';
 import { CheckboxStylingComponent } from './checkbox/checkbox-styling/checkbox-styling.component';
+import { CheckboxTailwindStylingComponent } from './checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component';
 import { dataEntriesRoutesData } from './data-entries-routes-data';
 import { DropDownRemoteComponent } from './dropdown/drop-down-remote-virtual/drop-down-remote.component';
 import { DropDownVirtualComponent } from './dropdown/drop-down-virtual/drop-down-virtual.component';
@@ -120,6 +123,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['button-group-style'],
         path: 'button-group-style'
     },
+    {
+        component: ButtonGroupTailwindStyleComponent,
+        data: dataEntriesRoutesData['button-group-tailwind-style'],
+        path: 'button-group-tailwind-style'
+    },
     {
         component: ButtonsRoundnessComponent,
         data: dataEntriesRoutesData['buttons-roundness-sample'],
@@ -175,6 +183,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['buttons-style'],
         path: 'buttons-style'
     },
+    {
+        component: ButtonsTailwindStyleComponent,
+        data: dataEntriesRoutesData['buttons-tailwind-style'],
+        path: 'buttons-tailwind-style'
+    },
     {
         component: CheckboxSample1Component,
         data: dataEntriesRoutesData['checkbox-sample-1'],
@@ -195,6 +208,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['checkbox-styling'],
         path: 'checkbox-styling'
     },
+    {
+        component: CheckboxTailwindStylingComponent,
+        data: dataEntriesRoutesData['checkbox-tailwind-styling'],
+        path: 'checkbox-tailwind-styling'
+    },
     {
         component: DropdownMenuComponent,
         data: dataEntriesRoutesData['dropdown-menu'],
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
new file mode 100644
index 0000000000..10443232fc
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -0,0 +1 @@
+<igx-avatar class="!material-avatar-background-[#FF4E00] ![--color:#011627]" initials="DY" shape="rounded"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
new file mode 100644
index 0000000000..8abca650cd
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
@@ -0,0 +1,3 @@
+igx-avatar {
+    margin: 12px;
+}
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.ts b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.ts
new file mode 100644
index 0000000000..8890dee8a7
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-avatar-tailwind-styling',
+    styleUrls: ['./avatar-tailwind-styling.component.scss'],
+    templateUrl: './avatar-tailwind-styling.component.html',
+    imports: [IgxAvatarComponent]
+})
+
+export class AvatarTailwindStylingSampleComponent {}
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..434d4e916a
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
@@ -0,0 +1,28 @@
+<div class="sample-column card-wrapper">
+  <igx-card class="!material-card-background-[#193625] ![--subtitle-text-color:#ECAA53]" elevated>
+    <igx-card-media height="180px">
+      <img [src]="card.imageUrl">
+    </igx-card-media>
+
+    <igx-card-header>
+      <h3 igxCardHeaderTitle>{{ card.title }}</h3>
+      <h5 igxCardHeaderSubtitle>{{ card.subtitle }}</h5>
+    </igx-card-header>
+
+    <igx-card-content>
+      <p>{{ card.content }}</p>
+    </igx-card-content>
+
+    <igx-card-actions>
+      @for (icon of card.icons; track icon) {
+        <button igxIconButton="flat"
+          igxRipple
+          [igxRippleCentered]="true"
+          igxEnd>
+          <igx-icon [style.color]="'#ECAA53'">{{icon}}</igx-icon>
+        </button>
+      }
+    </igx-card-actions>
+
+  </igx-card>
+</div>
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..9ea0c2646b
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Card } from '../card.blueprint';
+import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-card-tailwind-styling-sample',
+    templateUrl: './card-tailwind-styling-sample.component.html',
+    styleUrls: ['./card-tailwind-styling-sample.component.scss'],
+    imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
+})
+export class CardTailwindStylingSampleComponent {
+    public card = new Card({
+        content: `Hi! I'm Jane, photographer and filmmaker.
+        Photography is a way of feeling, of touching,
+        of loving. What you have caught on film is captured forever...
+        it remembers little things, long after you have
+        forgotten everything.`,
+        icons: ['person', 'favorite', 'share'],
+        imageUrl: 'https://images.unsplash.com/'
+        + 'photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+        subtitle: 'Professional Photographer',
+        title: 'Jane Doe'
+    });
+}
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/layout.scss b/src/app/layouts/card/card-tailwind-styling-sample/layout.scss
new file mode 100644
index 0000000000..d8f5f95f82
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling-sample/layout.scss
@@ -0,0 +1,4 @@
+.card-wrapper {
+  max-width: 320px;
+  min-width: 220px;
+}
\ No newline at end of file
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index 6b209d8ce4..b4637d08c7 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -10,6 +10,7 @@ export const layoutsRoutesData = {
     'avatar-sample-4': { displayName: 'Avatar with Icon', parentName: 'Avatar' },
     'avatar-sample-3': { displayName: 'Multiple avatars', parentName: 'Avatar' },
     'avatar-styling': { displayName: 'Styling avatars', parentName: 'Avatar' },
+    'avatar-tailwind-styling': { displayName: 'Styling Avatar with Tailwind', parentName: 'Avatar' },
     'avatar-css-variables': { displayName: 'Avatar with CSS variables', parentName: 'Avatar' },
     'carousel': { displayName: 'Carousel Base', parentName: 'Carousel' },
     'carousel-no-navigation-sample': { displayName: 'Carousel No Navigation', parentName: 'Carousel' },
@@ -44,6 +45,7 @@ export const layoutsRoutesData = {
     'tabbar-sample-2': { displayName: 'Bottom Navigation Customizing Panels', parentName: 'Bottom Navigation' },
     'tabbar-sample-3': { displayName: 'Bottom Navigation Routing', parentName: 'Bottom Navigation' },
     'tabbar-style': { displayName: 'Bottom Navigation Styling', parentName: 'Bottom Navigation' },
+    'tabbar-tailwind-style': { displayName: 'Bottom Navigation Tailwind Styling', parentName: 'Bottom Navigation' },
     'tabs-sample-1': { displayName: 'Tabs Overview', parentName: 'Tabs' },
     'tabs-sample-2': { displayName: 'Tabs Types', parentName: 'Tabs' },
     'tabs-sample-3': { displayName: 'Tabs Customizing', parentName: 'Tabs' },
@@ -57,6 +59,7 @@ export const layoutsRoutesData = {
     'card-sample-3': { displayName: 'Horizontal Card Alt', parentName: 'Card' },
     'card-sample-4': { displayName: 'Other Examples', parentName: 'Card' },
     'card-styling-sample': { displayName: 'Styled Card', parentName: 'Card' },
+    'card-tailwind-styling-sample': { displayName: 'Tailwind Styled Card', parentName: 'Card' },
     'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' },
     'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' },
     'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index f1c9ce6897..0ac623f797 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -5,12 +5,14 @@ import { AvatarSample2Component } from './avatar/avatar-sample-2/avatar-sample-2
 import { AvatarSample3Component } from './avatar/avatar-sample-3/avatar-sample-3.component';
 import { AvatarSample4Component } from './avatar/avatar-sample-4/avatar-sample-4.component';
 import { AvatarStylingSampleComponent } from './avatar/avatar-styling/avatar-styling.component';
+import { AvatarTailwindStylingSampleComponent } from './avatar/avatar-tailwind-styling/avatar-tailwind-styling.component';
 import { AvatarCSSVariablesComponent } from './avatar/avatar-css-variables/avatar-css-variables.component';
 import { CardSample1Component } from './card/card-sample-1/card-sample-1.component';
 import { CardSample2Component } from './card/card-sample-2/card-sample-2.component';
 import { CardSample3Component } from './card/card-sample-3/card-sample-3.component';
 import { CardSample4Component } from './card/card-sample-4/card-sample-4.component';
 import { CardStylingSampleComponent } from './card/card-styling-sample/card-styling-sample.component';
+import { CardTailwindStylingSampleComponent } from './card/card-tailwind-styling-sample/card-tailwind-styling-sample.component';
 import { CardComponent } from './card/card.component';
 import {
     CarouselAnimationsSampleComponent
@@ -52,6 +54,7 @@ import { TabbarSample1Component } from './tabbar/tabbar-sample-1/tabbar-sample-1
 import { TabbarSample2Component } from './tabbar/tabbar-sample-2/tabbar-sample-2.component';
 import { TabbarSample3Component } from './tabbar/tabbar-sample-3/components/tabbar-sample-3.component';
 import { TabbarStyleComponent } from './tabbar/tabbar-style/tabbar-style.component';
+import { TabbarTailwindStyleComponent } from './tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component';
 import { TabbarView1Component } from './tabbar/views/view1/view1.component';
 import { TabbarView2Component } from './tabbar/views/view2/view2.component';
 import { TabbarView3Component } from './tabbar/views/view3/view3.component';
@@ -124,6 +127,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['avatar-styling'],
         path: 'avatar-styling'
     },
+    {
+        component: AvatarTailwindStylingSampleComponent,
+        data: layoutsRoutesData['avatar-tailwind-styling'],
+        path: 'avatar-tailwind-styling'
+    },
     {
         component: AvatarCSSVariablesComponent,
         data: layoutsRoutesData['avatar-css-variables'],
@@ -319,6 +327,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['tabbar-style'],
         path: 'tabbar-style'
     },
+    {
+        component: TabbarTailwindStyleComponent,
+        data: layoutsRoutesData['tabbar-tailwind-style'],
+        path: 'tabbar-tailwind-style'
+    },
     {
         component: TabsSample1Component,
         data: layoutsRoutesData['tabs-sample-1'],
@@ -385,6 +398,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['card-styling-sample'],
         path: 'card-styling-sample'
     },
+    {
+        component: CardTailwindStylingSampleComponent,
+        data: layoutsRoutesData['card-tailwind-styling-sample'],
+        path: 'card-tailwind-styling-sample'
+    },
     {
         component: TileManagerComponent,
         data: layoutsRoutesData['tile-manager-sample'],
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/layout.scss b/src/app/layouts/tabbar/tabbar-tailwind-style/layout.scss
new file mode 100644
index 0000000000..c42e976704
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/layout.scss
@@ -0,0 +1,21 @@
+igx-bottom-nav-content {
+  padding: 10px;
+}
+
+.item {
+  margin-bottom: 5px;
+}
+
+.item-line1 {
+  font-size: 14px;
+  color: gray;
+}
+
+.item-line2 {
+  font-size: 12px;
+  color: darkgray;
+}
+
+igx-bottom-nav-content {
+  padding: 10px;
+}
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
new file mode 100644
index 0000000000..c9ea7fa367
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
@@ -0,0 +1,44 @@
+<igx-bottom-nav class="!material-bottom-nav-background-[#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
+  <igx-bottom-nav-item>
+    <igx-bottom-nav-header>
+      <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
+      <span igxBottomNavHeaderLabel>Songs</span>
+    </igx-bottom-nav-header>
+    <igx-bottom-nav-content>
+      @for (song of songsList; track song) {
+        <div class="item">
+          <span class="item-line1">{{song.title}}</span><br/>
+          <span class="item-line2">{{song.artist}}</span>
+        </div>
+      }
+    </igx-bottom-nav-content>
+  </igx-bottom-nav-item>
+  <igx-bottom-nav-item>
+    <igx-bottom-nav-header>
+      <igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
+      <span igxBottomNavHeaderLabel>Movies</span>
+    </igx-bottom-nav-header>
+    <igx-bottom-nav-content>
+      @for (movie of moviesList; track movie) {
+        <div class="item">
+          <span class="item-line1">{{movie.title}}</span><br/>
+          <span class="item-line2">{{movie.genre}}</span>
+        </div>
+      }
+    </igx-bottom-nav-content>
+  </igx-bottom-nav-item>
+  <igx-bottom-nav-item>
+    <igx-bottom-nav-header>
+      <igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
+      <span igxBottomNavHeaderLabel>Books</span>
+    </igx-bottom-nav-header>
+    <igx-bottom-nav-content>
+      @for (book of booksList; track book) {
+        <div class="item">
+          <span class="item-line1">{{book.title}}</span><br/>
+          <span class="item-line2">{{book.author}}</span>
+        </div>
+      }
+    </igx-bottom-nav-content>
+  </igx-bottom-nav-item>
+</igx-bottom-nav>
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.scss b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.ts b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.ts
new file mode 100644
index 0000000000..ae633ebe44
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.ts
@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/quotes */
+import { Component } from "@angular/core";
+import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent } from "igniteui-angular";
+
+
+@Component({
+    selector: "app-tabbar-tailwind-style",
+    styleUrls: ["./tabbar-tailwind-style.component.scss"],
+    templateUrl: "./tabbar-tailwind-style.component.html",
+    imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxIconComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavContentComponent]
+})
+export class TabbarTailwindStyleComponent {
+    public songsList = [
+        { title: "Havana", artist: "Camila Cabello" },
+        { title: "Meant To Be", artist: "Bebe Rexha & Florida Georgia Line" },
+        { title: "New Rules", artist: "Dua Lipa" },
+        { title: "Wolves", artist: "Selena Gomez & Marshmello" }
+        ];
+
+    public moviesList = [
+    { title: "Logan", genre: "Action, Drama, Sci-Fi" },
+    { title: "Wonder Woman", genre: "Action, Adventure, Fantasy" },
+    { title: "Guardians of the Galaxy Vol. 2", genre: "Action, Adventure, Sci-Fi" },
+    { title: "Star Wars: The Last Jedi", genre: "Action, Adventure, Fantasy" }
+    ];
+
+    public booksList = [
+    { title: "Wonder", author: "R. J. Palacio" },
+    { title: "Milk and Honey", author: "Rupi Kaur" },
+    { title: "Giraffes Can't Dance", author: "Jeff Kinne" },
+    { title: "The Getaway", author: "Selena Gomez & Marshmello" }
+    ];
+
+    constructor() { }
+}
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..a2ddca3e91
--- /dev/null
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
@@ -0,0 +1,4 @@
+<article class="calendar-wrapper">
+    <igx-calendar class="!material-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
+</article>
+
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.ts b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..0788a5d138
--- /dev/null
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxCalendarComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-calendar-tailwind-styling',
+    styleUrls: ['./calendar-tailwind-styling-sample.component.scss'],
+    templateUrl: './calendar-tailwind-styling-sample.component.html',
+    imports: [IgxCalendarComponent]
+})
+export class CalendarTailwindStylingSampleComponent { }
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/layout.scss
new file mode 100644
index 0000000000..538514fc6b
--- /dev/null
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/layout.scss
@@ -0,0 +1,12 @@
+@use "igniteui-angular/theming" as *;
+
+.calendar-wrapper {
+  max-width: 600px;
+  min-width: 200px;
+  margin: 8px;
+}
+
+.igx-calendar {
+  --ig-size: 2;
+  box-shadow: elevation(4);
+}
\ No newline at end of file
diff --git a/src/app/scheduling/scheduling-routes-data.ts b/src/app/scheduling/scheduling-routes-data.ts
index e0f4114242..c1ac3446d2 100644
--- a/src/app/scheduling/scheduling-routes-data.ts
+++ b/src/app/scheduling/scheduling-routes-data.ts
@@ -14,6 +14,7 @@ export const schedulingRoutesData = {
     'calendar-years-view': { displayName: 'Calendar Years View', parentName: 'Calendar' },
     'multiview-calendar': {displayName: 'Multiview Calendar', parentName: 'Calendar'},
     'calendar-styling-sample': { displayName: 'Calendar Styling', parentName: 'Calendar' },
+    'calendar-tailwind-styling-sample': { displayName: 'Calendar Tailwind Styling', parentName: 'Calendar' },
     'datepicker-dropdown': { displayName: 'Editable Datepicker', parentName: 'Datepicker' },
     'datepicker-sample-1': { displayName: 'Simple Datepicker', parentName: 'Datepicker' },
     'datepicker-sample-2': { displayName: 'One-way data bound Datepicker', parentName: 'Datepicker' },
diff --git a/src/app/scheduling/scheduling.routes.ts b/src/app/scheduling/scheduling.routes.ts
index ce2a260fb3..25bb5dfe26 100644
--- a/src/app/scheduling/scheduling.routes.ts
+++ b/src/app/scheduling/scheduling.routes.ts
@@ -12,6 +12,7 @@ import { CalendarSample8Component } from './calendar/calendar-sample-8/calendar-
 import { CalendarSample9Component } from './calendar/calendar-sample-9/calendar-sample-9.component';
 import { CalendarRtlSampleComponent } from './calendar/calendar-rtl-sample/calendar-rtl-sample.component';
 import { CalendarStylingSampleComponent } from './calendar/calendar-styling-sample/calendar-styling-sample.component';
+import { CalendarTailwindStylingSampleComponent } from './calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component';
 import { CalendarYearsViewComponent } from './calendar/calendar-years-view/calendar-years-view.component';
 import { CalendarMultiViewComponent } from './calendar/multiview/multiview.component';
 import { DatepickerDropdownComponent } from './datepicker/datepicker-dropdown/datepicker-dropdown.component';
@@ -105,6 +106,11 @@ export const SchedulingRoutes: Routes = [
         data: schedulingRoutesData['calendar-styling-sample'],
         path: 'calendar-styling-sample'
     },
+    {
+        component: CalendarTailwindStylingSampleComponent,
+        data: schedulingRoutesData['calendar-tailwind-styling-sample'],
+        path: 'calendar-tailwind-styling-sample'
+    },
     {
         component: CalendarDaysViewComponent,
         data: schedulingRoutesData['calendar-days-view'],

From 617a39099bcbd13bf9312ab24ec706e5496950ef Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 19 Aug 2025 14:50:10 +0300
Subject: [PATCH 02/11] feat(tailwind-styles):add tailwind styling samples

---
 .../data-display/data-display-routes-data.ts  |  1 +
 src/app/data-display/data-display.routes.ts   |  6 ++
 ...con-tailwind-styling-sample.component.html |  1 +
 ...con-tailwind-styling-sample.component.scss |  0
 .../icon-tailwind-styling-sample.component.ts | 10 +++
 .../data-entries/data-entries-routes-data.ts  |  5 ++
 src/app/data-entries/data-entries.routes.ts   | 30 +++++++++
 ...con-button-tailwind-styling.component.html | 17 ++++++
 ...con-button-tailwind-styling.component.scss | 13 ++++
 .../icon-button-tailwind-styling.component.ts | 11 ++++
 ...nput-group-tailwind-styling.component.html | 31 ++++++++++
 ...nput-group-tailwind-styling.component.scss |  5 ++
 .../input-group-tailwind-styling.component.ts | 10 +++
 .../input-group-tailwind-styling/layout.scss  |  3 +
 .../radio-tailwind-styling-sample/layout.scss |  9 +++
 ...dio-tailwind-styling-sample.component.html |  7 +++
 ...dio-tailwind-styling-sample.component.scss |  9 +++
 ...radio-tailwind-styling-sample.component.ts | 13 ++++
 .../select-tailwind-styling/layout.scss       |  5 ++
 .../select-tailwind-styling.component.html    | 10 +++
 .../select-tailwind-styling.component.scss    |  1 +
 .../select-tailwind-styling.component.ts      | 35 +++++++++++
 .../switch-tailwind-styling/layout.scss       |  9 +++
 .../switch-tailwind-styling.component.html    |  7 +++
 .../switch-tailwind-styling.component.scss    |  1 +
 .../switch-tailwind-styling.component.ts      | 17 ++++++
 .../interactions/interactions-routes-data.ts  |  3 +
 src/app/interactions/interactions.routes.ts   | 18 ++++++
 ...uery-builder-tailwind-style.component.html |  5 ++
 ...uery-builder-tailwind-style.component.scss |  0
 .../query-builder-tailwind-style.component.ts | 59 ++++++++++++++++++
 .../slider-tailwind-styling.component.html    | 11 ++++
 .../slider-tailwind-styling.component.scss    |  3 +
 .../slider-tailwind-styling.component.ts      | 14 +++++
 .../tooltip-tailwind-style.component.html     | 10 +++
 .../tooltip-tailwind-style.component.scss     |  0
 .../tooltip-tailwind-style.component.ts       | 10 +++
 .../expansion-tailwind-styling.component.html | 21 +++++++
 .../expansion-tailwind-styling.component.scss |  1 +
 .../expansion-tailwind-styling.component.ts   | 15 +++++
 .../expansion-tailwind-styling/layout.scss    | 35 +++++++++++
 src/app/layouts/layouts-routes-data.ts        |  4 ++
 src/app/layouts/layouts.routes.ts             | 23 +++++++
 ...ter-tailwind-styling-sample.component.html | 12 ++++
 ...ter-tailwind-styling-sample.component.scss |  3 +
 ...itter-tailwind-styling-sample.component.ts | 12 ++++
 .../layout.scss                               | 25 ++++++++
 ...per-tailwind-styling-sample.component.html | 37 +++++++++++
 ...per-tailwind-styling-sample.component.scss |  1 +
 ...epper-tailwind-styling-sample.component.ts | 26 ++++++++
 .../tabs-tailwind-style.component.html        | 30 +++++++++
 .../tabs-tailwind-style.component.scss        |  4 ++
 .../tabs-tailwind-style.component.ts          | 10 +++
 .../combo-tailwind-styling.component.html     | 10 +++
 .../combo-tailwind-styling.component.scss     | 23 +++++++
 .../combo-tailwind-styling.component.ts       | 32 ++++++++++
 .../combo/combo-tailwind-styling/layout.scss  |  3 +
 .../list/list-tailwind-styling/layout.scss    |  9 +++
 .../list-tailwind-styling.component.html      | 15 +++++
 .../list-tailwind-styling.component.scss      |  1 +
 .../list-tailwind-styling.component.ts        | 61 +++++++++++++++++++
 src/app/lists/lists-routes-data.ts            |  5 +-
 src/app/lists/lists.routes.ts                 | 18 ++++++
 .../tree/tree-tailwind-styling/layout.scss    | 11 ++++
 .../tree-tailwind-styling.component.html      | 14 +++++
 .../tree-tailwind-styling.component.scss      |  1 +
 .../tree-tailwind-styling.component.ts        | 17 ++++++
 src/app/menus/menus-routes-data.ts            |  1 +
 src/app/menus/menus.routes.ts                 |  6 ++
 .../navbar-style/navbar-style.component.scss  |  6 +-
 .../navbar-tailwind-style.component.html      | 19 ++++++
 .../navbar-tailwind-style.component.scss      |  0
 .../navbar-tailwind-style.component.ts        | 11 ++++
 .../notifications-routes-data.ts              |  4 +-
 src/app/notifications/notifications.routes.ts | 12 ++++
 .../snackbar-tailwind-style.component.html    | 13 ++++
 .../snackbar-tailwind-style.component.scss    |  0
 .../snackbar-tailwind-style.component.ts      | 17 ++++++
 .../toast-tailwind-style.component.html       | 11 ++++
 .../toast-tailwind-style.component.scss       |  3 +
 .../toast-tailwind-style.component.ts         | 21 +++++++
 ...dar-tailwind-styling-sample.component.html |  1 -
 .../monthpicker-tailwind-styling/layout.scss  |  4 ++
 ...onthpicker-tailwind-styling.component.html |  1 +
 ...onthpicker-tailwind-styling.component.scss |  1 +
 .../monthpicker-tailwind-styling.component.ts | 12 ++++
 src/app/scheduling/scheduling-routes-data.ts  |  1 +
 src/app/scheduling/scheduling.routes.ts       |  6 ++
 88 files changed, 1024 insertions(+), 4 deletions(-)
 create mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
 create mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss
 create mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts
 create mode 100644 src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
 create mode 100644 src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.scss
 create mode 100644 src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.ts
 create mode 100644 src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
 create mode 100644 src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.scss
 create mode 100644 src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.ts
 create mode 100644 src/app/data-entries/input-group/input-group-tailwind-styling/layout.scss
 create mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/layout.scss
 create mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
 create mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss
 create mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts
 create mode 100644 src/app/data-entries/select/select-tailwind-styling/layout.scss
 create mode 100644 src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
 create mode 100644 src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.scss
 create mode 100644 src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.ts
 create mode 100644 src/app/data-entries/switch/switch-tailwind-styling/layout.scss
 create mode 100644 src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
 create mode 100644 src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss
 create mode 100644 src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.ts
 create mode 100644 src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
 create mode 100644 src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.scss
 create mode 100644 src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.ts
 create mode 100644 src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
 create mode 100644 src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.scss
 create mode 100644 src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.ts
 create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
 create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss
 create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts
 create mode 100644 src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
 create mode 100644 src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.scss
 create mode 100644 src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.ts
 create mode 100644 src/app/layouts/expansion-panel/expansion-tailwind-styling/layout.scss
 create mode 100644 src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
 create mode 100644 src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.scss
 create mode 100644 src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.ts
 create mode 100644 src/app/layouts/stepper/stepper-tailwind-styling-sample/layout.scss
 create mode 100644 src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
 create mode 100644 src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.scss
 create mode 100644 src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.ts
 create mode 100644 src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
 create mode 100644 src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss
 create mode 100644 src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts
 create mode 100644 src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
 create mode 100644 src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.scss
 create mode 100644 src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.ts
 create mode 100644 src/app/lists/combo/combo-tailwind-styling/layout.scss
 create mode 100644 src/app/lists/list/list-tailwind-styling/layout.scss
 create mode 100644 src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
 create mode 100644 src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.scss
 create mode 100644 src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.ts
 create mode 100644 src/app/lists/tree/tree-tailwind-styling/layout.scss
 create mode 100644 src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
 create mode 100644 src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.scss
 create mode 100644 src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.ts
 create mode 100644 src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
 create mode 100644 src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.scss
 create mode 100644 src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.ts
 create mode 100644 src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
 create mode 100644 src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.scss
 create mode 100644 src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.ts
 create mode 100644 src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
 create mode 100644 src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.scss
 create mode 100644 src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.ts
 create mode 100644 src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss
 create mode 100644 src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
 create mode 100644 src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss
 create mode 100644 src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.ts

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index e69a6faa88..b3c0b7f338 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -18,6 +18,7 @@ export const dataDisplayRoutesData = {
     "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
     "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
+    "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
     "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
     "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
     "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 5b350c6b4a..acb3a45ede 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -18,6 +18,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone
 import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
 import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
 import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
+import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component';
 import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
 import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
@@ -215,6 +216,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['icon-styling'],
         path: 'icon-styling'
     },
+    {
+        component: IconTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['icon-tailwind-styling'],
+        path: 'icon-tailwind-styling'
+    },
     {
         component: ChipStylingSampleComponent,
         data: dataDisplayRoutesData['chip-styling'],
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..a5ed41344e
--- /dev/null
+++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
@@ -0,0 +1 @@
+<igx-icon class="!material-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..0ea18b4af8
--- /dev/null
+++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-icon-tailwind-styling-sample',
+    styleUrls: ['./icon-tailwind-styling-sample.component.scss'],
+    templateUrl: './icon-tailwind-styling-sample.component.html',
+    imports: [IgxIconComponent]
+})
+export class IconTailwindStylingSampleComponent { }
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index cd5f3228c5..c6d537969d 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -48,6 +48,7 @@ export const dataEntriesRoutesData = {
     "svg-icon-button": { displayName: "SVG Icon Button", parentName: "Icon Buttons" },
     "icon-button-size": { displayName: "Icon Button Size", parentName: "Icon Buttons" },
     "icon-button-styling": { displayName: "Icon Button Styling", parentName: "Icon Buttons" },
+    "icon-button-tailwind-styling": { displayName: "Icon Button Tailwind Styling", parentName: "Icon Buttons" },
     "input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
     "input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
     "input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },
@@ -55,6 +56,7 @@ export const dataEntriesRoutesData = {
     "input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
     "input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
     "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
+    "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
     "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },
     "radio-sample-1": { displayName: "Simple Radio Buttons", parentName: "Radio" },
     "radio-sample-2": { displayName: "Radio Button Binding", parentName: "Radio" },
@@ -62,14 +64,17 @@ export const dataEntriesRoutesData = {
     "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" },
     "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" },
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
+    "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
     "switch-sample-1": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-sample-2": { displayName: "Multiple Switches", parentName: "Switch" },
     "switch-styling": { displayName: "Styled Switches", parentName: "Switch" },
+    "switch-tailwind-styling": { displayName: "Tailwind Styled Switches", parentName: "Switch" },
     "select-sample-1": { displayName: "Simple Select", parentName: "Select" },
     "select-sample-2": { displayName: "Select With Groups", parentName: "Select" },
     "select-sample-4": { displayName: "Custom Overlay Settings", parentName: "Select" },
     "select-styling": { displayName: "Select Styling", parentName: "Select" },
+    "select-tailwind-styling": { displayName: "Select Tailwind Styling", parentName: "Select" },
     "select-input-directives": { displayName: "Select Input Directives", parentName: "Select" },
     "select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" },
     "input-text-selection": { displayName: "Input with Text Selection", parentName: "Input Group" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index d42a047513..665bf7c9e1 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -46,6 +46,7 @@ import { InputGroupSample4Component } from './input-group/input-group-sample-4/i
 import { InputGroupSample5Component } from './input-group/input-group-sample-5/input-group-sample-5.component';
 import { InputGroupSample6Component } from './input-group/input-group-sample-6/input-group-sample-6.component';
 import { InputGroupStyleComponent } from './input-group/input-group-styling/input-group-styling.component';
+import { InputGroupTailwindStyleComponent } from './input-group/input-group-tailwind-styling/input-group-tailwind-styling.component';
 import { InputTextSelectionComponent } from './input-group/input-text-selection/input-text-selection.component';
 import { TypedFormComponent } from './input-group/typed-form/typed-form.component';
 import { ReactiveFormsSampleComponent } from '../how-to/reactive-forms/reactive-forms.component';
@@ -55,15 +56,18 @@ import { RadioSample1Component } from './radio/radio-sample-1/radio-sample-1.com
 import { RadioSample2Component } from './radio/radio-sample-2/radio-sample-2.component';
 import { RadioSample3Component } from './radio/radio-sample-3/radio-sample-3.component';
 import { RadioStylingSampleComponent } from './radio/radio-styling-sample/radio-styling-sample.component';
+import { RadioTailwindStylingSampleComponent } from './radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component';
 import { SelectHeaderFooterComponent } from './select/select-header-footer/select-header-footer.component';
 import { SelectInputDirectivesComponent } from './select/select-input-directives/select-input-directives';
 import { SelectSample1Component } from './select/select-sample-1/select-sample-1.component';
 import { SelectSample2Component } from './select/select-sample-2/select-sample-2.component';
 import { SelectSample4Component } from './select/select-sample-4/select-sample-4.component';
 import { SelectStylingComponent } from './select/select-styling/select-styling.component';
+import { SelectTailwindStylingComponent } from './select/select-tailwind-styling/select-tailwind-styling.component';
 import { SwitchSample1Component } from './switch/switch-sample-1/switch-sample-1.component';
 import { SwitchSample2Component } from './switch/switch-sample-2/switch-sample-2.component';
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
+import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component';
 import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
@@ -76,6 +80,7 @@ import { DisabledIconButtonComponent } from './icon-button/disabled-icon-button/
 import { SVGIconButtonComponent } from './icon-button/svg-icon-button/svg-icon-button.component';
 import { IconButtonSizeComponent } from './icon-button/icon-button-size/icon-button-size.component';
 import { IconButtonStylingComponent } from './icon-button/icon-button-styling/icon-button-styling.component';
+import { IconButtonTailwindStylingComponent } from './icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component';
 
 export const DataEntriesRoutes: Routes = [
     {
@@ -313,6 +318,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['icon-button-styling'],
         path: 'icon-button-styling'
     },
+    {
+        component: IconButtonTailwindStylingComponent,
+        data: dataEntriesRoutesData['icon-button-tailwind-styling'],
+        path: 'icon-button-tailwind-styling'
+    },
     {
         component: InputGroupSample1Component,
         data: dataEntriesRoutesData['input-group-sample-1'],
@@ -348,6 +358,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['input-group-style'],
         path: 'input-group-style'
     },
+    {
+        component: InputGroupTailwindStyleComponent,
+        data: dataEntriesRoutesData['input-group-tailwind-style'],
+        path: 'input-group-tailwind-style'
+    },
     {
         component: ReactiveFormsSampleComponent,
         data: dataEntriesRoutesData['reactive-forms'],
@@ -383,6 +398,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['radio-styling-sample'],
         path: 'radio-styling-sample'
     },
+    {
+        component: RadioTailwindStylingSampleComponent,
+        data: dataEntriesRoutesData['radio-tailwind-styling-sample'],
+        path: 'radio-tailwind-styling-sample'
+    },
     {
         component: RatingInFormComponent,
         data: dataEntriesRoutesData['rating-in-form'],
@@ -403,6 +423,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['switch-styling'],
         path: 'switch-styling'
     },
+    {
+        component: SwitchTailwindStylingComponent,
+        data: dataEntriesRoutesData['switch-tailwind-styling'],
+        path: 'switch-tailwind-styling'
+    },
     {
         component: SelectSample1Component,
         data: dataEntriesRoutesData['select-sample-1'],
@@ -422,6 +447,11 @@ export const DataEntriesRoutes: Routes = [
         component: SelectStylingComponent,
         data: dataEntriesRoutesData['select-styling'],
         path: 'select-styling'
+    },
+     {
+        component: SelectTailwindStylingComponent,
+        data: dataEntriesRoutesData['select-tailwind-styling'],
+        path: 'select-tailwind-styling'
     },
     {
         component: SelectInputDirectivesComponent,
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
new file mode 100644
index 0000000000..5e168aa9fa
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="button-sample">
+        <button class="!material-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button class="!material-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button class="!material-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+</div>
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.scss b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.scss
new file mode 100644
index 0000000000..25f8a6ec6e
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.scss
@@ -0,0 +1,13 @@
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.button-sample {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 30%;
+  margin: 16px 0;
+}
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.ts b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.ts
new file mode 100644
index 0000000000..bc448b9989
--- /dev/null
+++ b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.ts
@@ -0,0 +1,11 @@
+
+import { Component } from '@angular/core';
+import { IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-icon-button-tailwind-styling',
+    styleUrls: ['./icon-button-tailwind-styling.component.scss'],
+    templateUrl: './icon-button-tailwind-styling.component.html',
+    imports: [IgxIconButtonDirective, IgxIconComponent]
+})
+export class IconButtonTailwindStylingComponent { }
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
new file mode 100644
index 0000000000..6b06f26e08
--- /dev/null
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
@@ -0,0 +1,31 @@
+<article class="sample-column">
+    <igx-input-group class="!material-input-box-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
+        <igx-prefix>+359</igx-prefix>
+        <label igxLabel for="phone">Phone</label>
+        <input type="tel" igxInput name="phone" />
+        <igx-suffix>
+            <igx-icon>phone</igx-icon>
+        </igx-suffix>
+        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+    </igx-input-group>
+
+    <igx-input-group class="!material-input-border-color-[#7B9E89]" type="border">
+        <igx-prefix>+359</igx-prefix>
+        <label igxLabel for="phone">Phone</label>
+        <input type="tel" igxInput name="phone" />
+        <igx-suffix>
+            <igx-icon>phone</igx-icon>
+        </igx-suffix>
+        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+    </igx-input-group>
+
+    <igx-input-group class="!material-input-search-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
+        <igx-prefix>+359</igx-prefix>
+        <label igxLabel for="phone">Search</label>
+        <input type="tel" igxInput name="phone" />
+        <igx-suffix>
+            <igx-icon>phone</igx-icon>
+        </igx-suffix>
+        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+    </igx-input-group>
+</article>
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.scss b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.scss
new file mode 100644
index 0000000000..943cb70606
--- /dev/null
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.scss
@@ -0,0 +1,5 @@
+@use "layout.scss";
+
+.sample-column {
+    gap: 1rem;
+}
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.ts b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.ts
new file mode 100644
index 0000000000..6f6d4e2ead
--- /dev/null
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-input-group-tailwind-style',
+    templateUrl: 'input-group-tailwind-styling.component.html',
+    styleUrls: ['input-group-tailwind-styling.component.scss'],
+    imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective]
+})
+export class InputGroupTailwindStyleComponent { }
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/layout.scss b/src/app/data-entries/input-group/input-group-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..fc4259acbb
--- /dev/null
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/layout.scss
@@ -0,0 +1,3 @@
+.sample-column {
+  max-width: 550px;
+}
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/layout.scss b/src/app/data-entries/radio/radio-tailwind-styling-sample/layout.scss
new file mode 100644
index 0000000000..a275b1e4e2
--- /dev/null
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/layout.scss
@@ -0,0 +1,9 @@
+igx-radio + igx-radio {
+  margin-top: 16px;
+}
+
+.radio-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..5ab17e039c
--- /dev/null
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
@@ -0,0 +1,7 @@
+<div class="radio-wrapper">
+  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
+  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
+  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
+  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
+  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
+</div>
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..c2c3383809
--- /dev/null
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss
@@ -0,0 +1,9 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+$custom-radio-theme: radio-theme(
+  $empty-color:  #345779,
+  $fill-color: #2dabe8,
+);
+
+@include css-vars($custom-radio-theme);
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..dc69e2f0db
--- /dev/null
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IgxRadioComponent } from 'igniteui-angular';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+    selector: 'app-radio-tailwind-styling',
+    styleUrls: ['./radio-tailwind-styling-sample.component.scss'],
+    templateUrl: './radio-tailwind-styling-sample.component.html',
+    imports: [IgxRadioComponent, FormsModule]
+})
+export class RadioTailwindStylingSampleComponent {
+    public selected: string;
+}
diff --git a/src/app/data-entries/select/select-tailwind-styling/layout.scss b/src/app/data-entries/select/select-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..76b1965de4
--- /dev/null
+++ b/src/app/data-entries/select/select-tailwind-styling/layout.scss
@@ -0,0 +1,5 @@
+.select-wrapper {
+  display: flex;
+  padding-top: 20px;
+  padding-left: 20px;
+}
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
new file mode 100644
index 0000000000..1817af0947
--- /dev/null
+++ b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
@@ -0,0 +1,10 @@
+<div class="select-wrapper">
+  <igx-select class="!material-select-toggle-button-[#99BAA6] ![toggle-button-background-focus:#7B9E89]" [overlaySettings]="customOverlaySettings">
+    <label igxLabel>Select An Item</label>
+    @for (item of items; track item) {
+      <igx-select-item [value]="item">
+        {{item}}
+      </igx-select-item>
+    }
+  </igx-select>
+</div>
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.scss b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.ts b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.ts
new file mode 100644
index 0000000000..7634c7f100
--- /dev/null
+++ b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSelectComponent, OverlaySettings, PositionSettings, VerticalAlignment, IgxLabelDirective, IgxSelectItemComponent } from 'igniteui-angular';
+import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations';
+
+
+@Component({
+    selector: 'app-select-tailwind-styling',
+    styleUrls: ['select-tailwind-styling.component.scss'],
+    templateUrl: 'select-tailwind-styling.component.html',
+    imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent]
+})
+export class SelectTailwindStylingComponent implements OnInit {
+    @ViewChild(IgxSelectComponent, { static: true })
+    public igxSelect: IgxSelectComponent;
+    public items: string[] = ['Orange', 'Apple', 'Banana'];
+    public customOverlaySettings: OverlaySettings;
+
+    public ngOnInit(): void {
+        const positionSettings: PositionSettings = {
+            closeAnimation: scaleOutBottom,
+            horizontalDirection: HorizontalAlignment.Right,
+            horizontalStartPoint: HorizontalAlignment.Left,
+            openAnimation: scaleInTop,
+            verticalDirection: VerticalAlignment.Bottom,
+            verticalStartPoint: VerticalAlignment.Bottom
+        };
+        this.customOverlaySettings = {
+            target: this.igxSelect.inputGroup.element.nativeElement,
+            positionStrategy: new ConnectedPositioningStrategy(
+                positionSettings
+            ),
+            scrollStrategy: new AbsoluteScrollStrategy()
+        };
+    }
+}
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/layout.scss b/src/app/data-entries/switch/switch-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..0988ab89bd
--- /dev/null
+++ b/src/app/data-entries/switch/switch-tailwind-styling/layout.scss
@@ -0,0 +1,9 @@
+igx-switch {
+  margin-bottom: 24px;
+}
+
+.switch-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 16px;
+}
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
new file mode 100644
index 0000000000..8ac6096b0d
--- /dev/null
+++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
@@ -0,0 +1,7 @@
+<div class="switch-wrapper">
+  @for (setting of settings; track setting) {
+    <igx-switch class="!material-switch-color-[#7B9E89] ![--label-color:#4F6A5A]" [checked]="setting.state">
+      {{ setting.name }}
+    </igx-switch>
+  }
+</div>
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.ts b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.ts
new file mode 100644
index 0000000000..3050d9870c
--- /dev/null
+++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { IgxSwitchComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-switch-tailwind-styling',
+    styleUrls: ['./switch-tailwind-styling.component.scss'],
+    templateUrl: './switch-tailwind-styling.component.html',
+    imports: [IgxSwitchComponent]
+})
+export class SwitchTailwindStylingComponent {
+  public settings = [
+    { name: 'WiFi', state: false},
+    { name: 'Bluetooth', state: true},
+    { name: 'Device visibility', state: false}
+  ];
+}
diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts
index d05119724d..50c683077b 100644
--- a/src/app/interactions/interactions-routes-data.ts
+++ b/src/app/interactions/interactions-routes-data.ts
@@ -18,6 +18,7 @@ export const interactionsRoutesData = {
     'slider-timeframe': { displayName: 'Slider Timeframe', parentName: 'Slider' },
     'slider-tick-labels-template': { displayName: 'Slider Tick labels template', parentName: 'Slider' },
     'slider-styling-sample': { displayName: 'Slider styling sample', parentName: 'Slider' },
+    'slider-tailwind-styling-sample': { displayName: 'Slider tailwind styling sample', parentName: 'Slider' },
     'ripple-sample-2': { displayName: 'Ripple Target', parentName: 'Ripple' },
     'ripple-sample-3': { displayName: 'Ripple Centered Effect', parentName: 'Ripple' },
     'ripple-sample-4': { displayName: 'Ripple Duration', parentName: 'Ripple' },
@@ -33,6 +34,7 @@ export const interactionsRoutesData = {
     'tooltip-simple': { displayName: 'Simple Tooltip', parentName: 'Tooltip' },
     'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
     'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
+    'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
     'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },
     'overlay-sample-main-2': { displayName: 'Overlay Main Sample 2', parentName: 'Overlay' },
     'overlay-sample-main-3': { displayName: 'Overlay Main Sample 3', parentName: 'Overlay' },
@@ -50,6 +52,7 @@ export const interactionsRoutesData = {
     'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' },
     'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
     'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
+    'query-builder-tailwind-style': { displayName: 'Query Builder Tailwind Style Sample', parentName: 'Query Builder' },
     'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' },
     'query-builder-sql-sample': { displayName: 'Query Builder SQL Sample', parentName: 'Query Builder' },
     'query-builder-request-sample': { displayName: 'Query Builder Request Sample', parentName: 'Query Builder' }
diff --git a/src/app/interactions/interactions.routes.ts b/src/app/interactions/interactions.routes.ts
index d580ff3d8f..3882c4396d 100644
--- a/src/app/interactions/interactions.routes.ts
+++ b/src/app/interactions/interactions.routes.ts
@@ -22,6 +22,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla
 import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component';
 import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
 import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
+import { QueryBuilderTailwindStyleComponent } from './query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component';
 import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
 import { QueryBuilderSqlSampleComponent } from './query-builder/query-builder-sql-sample/query-builder-sql-sample.component';
 import { QueryBuilderRequestSampleComponent } from './query-builder/query-builder-request-sample/query-builder-request-sample.component';
@@ -47,6 +48,7 @@ import {
     SliderSecondaryTicksMirrorComponent
 } from './slider/slider-secondary-ticks-mirror/slider-secondary-ticks-mirror.component';
 import { AppSliderStylingComponent } from './slider/slider-styling-sample/app-slider-styling.component';
+import { SliderTailwindStylingComponent } from './slider/slider-tailwind-styling-sample/slider-tailwind-styling.component';
 import { TickLabelsTemplateComponent } from './slider/slider-tick-labels-template/tick-labels-template.component';
 import {
     SliderTicksBottomtotopLabelsComponent
@@ -60,6 +62,7 @@ import { ToggleComponent } from './toggle/toggle.component';
 import { TooltipRichComponent } from './tooltip/tooltip-rich/tooltip-rich.component';
 import { TooltipSimpleComponent } from './tooltip/tooltip-simple/tooltip-simple.component';
 import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.component';
+import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
 
 export const InteractionsRoutes: Routes = [
     {
@@ -147,6 +150,11 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['slider-styling-sample'],
         path: 'slider-styling-sample'
     },
+    {
+        component: SliderTailwindStylingComponent,
+        data: interactionsRoutesData['slider-tailwind-styling-sample'],
+        path: 'slider-tailwind-styling-sample'
+    },
     {
         component: RippleSample2Component,
         data: interactionsRoutesData['ripple-sample-2'],
@@ -212,6 +220,11 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['tooltip-style'],
         path: 'tooltip-style'
     },
+    {
+        component: TooltipTailwindStyleComponent,
+        data: interactionsRoutesData['tooltip-tailwind-style'],
+        path: 'tooltip-tailwind-style'
+    },
     {
         component: OverlaySampleMain1Component,
         data: interactionsRoutesData['overlay-sample-main-1'],
@@ -302,6 +315,11 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['query-builder-style'],
         path: 'query-builder-style'
     },
+    {
+        component: QueryBuilderTailwindStyleComponent,
+        data: interactionsRoutesData['query-builder-tailwind-style'],
+        path: 'query-builder-tailwind-style'
+    },
     {
         component: QueryBuilderTemplateSampleComponent,
         data: interactionsRoutesData['query-builder-template-sample'],
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
new file mode 100644
index 0000000000..d10f51d5d0
--- /dev/null
+++ b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <igx-query-builder class="!material-query-builder-background-[#90B69F] ![--label-foreground:#121E17]" #queryBuilder
+        [entities]="entities">
+    </igx-query-builder>
+</div>
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.scss b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.ts b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.ts
new file mode 100644
index 0000000000..513fb3ab10
--- /dev/null
+++ b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { IgxQueryBuilderComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-query-builder-tailwind-style-sample',
+    styleUrls: ['./query-builder-tailwind-style.component.scss'],
+    templateUrl: 'query-builder-tailwind-style.component.html',
+    imports: [IgxQueryBuilderComponent]
+})
+export class QueryBuilderTailwindStyleComponent implements OnInit {
+    public entities: any[];
+    public companiesFields: any[];
+    public ordersFields: any[];
+    public ngOnInit(): void {
+        this.companiesFields = [
+            { field: "ID", dataType: "string" },
+            { field: "CompanyName", dataType: "string" },
+            { field: "ContactName", dataType: "string" },
+            { field: "Employees", dataType: "number" },
+            { field: "ContactTitle", dataType: "string" },
+            { field: "DateCreated", dataType: "date" },
+            { field: "TimeCreated", dataType: "time" },
+            { field: "Address", dataType: "string" },
+            { field: "City", dataType: "string" },
+            { field: "Region", dataType: "string" },
+            { field: "PostalCode", dataType: "string" },
+            { field: "Phone", dataType: "string" },
+            { field: "Fax", dataType: "string" },
+            { field: "Contract", dataType: "boolean" }
+        ];
+
+        this.ordersFields = [
+            { field: "CompanyID", dataType: "string" },
+            { field: "OrderID", dataType: "number" },
+            { field: "EmployeeId", dataType: "number" },
+            { field: "OrderDate", dataType: "date" },
+            { field: "RequiredDate", dataType: "date" },
+            { field: "ShippedDate", dataType: "date" },
+            { field: "ShipVia", dataType: "number" },
+            { field: "Freight", dataType: "number" },
+            { field: "ShipName", dataType: "string" },
+            { field: "ShipCity", dataType: "string" },
+            { field: "ShipPostalCode", dataType: "string" },
+            { field: "ShipCountry", dataType: "string" },
+            { field: "Region", dataType: "string" }
+        ];
+
+        this.entities = [
+            {
+                name: "Companies",
+                fields: this.companiesFields
+            },
+            {
+                name: "Orders",
+                fields: this.ordersFields
+            }
+        ];
+    }
+}
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
new file mode 100644
index 0000000000..2e5828b820
--- /dev/null
+++ b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
@@ -0,0 +1,11 @@
+<div class="container">
+    <igx-slider
+        class="!material-slider-color-[#7B9E89]
+        ![--track-step-color:#B9375D]"
+        [step]="10"
+        [maxValue]="100"
+        [primaryTicks]="3"
+        [secondaryTicks]="4"
+        [ticksOrientation]="ticksOrientation">
+    </igx-slider>
+</div>
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.scss b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.scss
new file mode 100644
index 0000000000..672039db6f
--- /dev/null
+++ b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 18px;
+}
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.ts b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.ts
new file mode 100644
index 0000000000..168dc328a5
--- /dev/null
+++ b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxSliderComponent, TicksOrientation} from 'igniteui-angular';
+
+@Component({
+    selector: 'slider-tailwind-styling',
+    styleUrls: ['./slider-tailwind-styling.component.scss'],
+    templateUrl: './slider-tailwind-styling.component.html',
+    imports: [IgxSliderComponent]
+})
+export class SliderTailwindStylingComponent {
+    @ViewChild(IgxSliderComponent, { static: true })
+    public slider: IgxSliderComponent;
+    public ticksOrientation = TicksOrientation.Mirror;
+}
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
new file mode 100644
index 0000000000..11057995a3
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
@@ -0,0 +1,10 @@
+<igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
+    src="assets/images/avatar/10.jpg" size="medium" shape="circle"
+    [igxToggleOutlet]="outlet">
+</igx-avatar>
+
+<div #outlet="overlay-outlet" igxOverlayOutlet>
+    <div class="!material-tooltip-background-[#90B69F] ![--border-radius:6px]" #tooltipRef="tooltip" igxTooltip>
+        Her name is Madelyn James
+    </div>
+</div>
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts
new file mode 100644
index 0000000000..f4fc1b4ce3
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent, IgxTooltipTargetDirective, IgxOverlayOutletDirective, IgxTooltipDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-tooltip-tailwind-style',
+    styleUrls: ['./tooltip-tailwind-style.component.scss'],
+    templateUrl: './tooltip-tailwind-style.component.html',
+    imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxOverlayOutletDirective, IgxTooltipDirective]
+})
+export class TooltipTailwindStyleComponent { }
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
new file mode 100644
index 0000000000..0dd0eeaac6
--- /dev/null
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
@@ -0,0 +1,21 @@
+<div class="sample-holder">
+    <igx-expansion-panel class="my-expansion-panel !material-expansion-panel-header-background-[#4F6A5A] ![--body-background:#A3C7B2]">
+        <igx-expansion-panel-header [iconPosition]="'right'">
+            <igx-expansion-panel-title>
+                Golden Retriever
+            </igx-expansion-panel-title>
+            <igx-expansion-panel-description>
+                Medium-large gun dog
+            </igx-expansion-panel-description>
+        </igx-expansion-panel-header>
+        <igx-expansion-panel-body>
+            <div class="example-content">
+                <img height="100" [src]="imgSource" alt="">
+                <span>
+                    The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards.
+                </span>
+                <a igxButton="contained" target="_blank" [href]="readMore">Read more</a>
+            </div>
+        </igx-expansion-panel-body>
+    </igx-expansion-panel>
+</div>
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.scss b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.ts b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.ts
new file mode 100644
index 0000000000..2513108f09
--- /dev/null
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import { IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective } from 'igniteui-angular';
+
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: 'app-expansion-tailwind-styling',
+    styleUrls: ['./expansion-tailwind-styling.component.scss'],
+    templateUrl: './expansion-tailwind-styling.component.html',
+    imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective]
+})
+
+export class ExpansionPanelTailwindStylingComponent {
+    public imgSource = 'https://i.ibb.co/6ZdY7cn/Untitled-design-3.png';
+    public readMore = 'https://en.wikipedia.org/wiki/Golden_Retriever';
+}
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/layout.scss b/src/app/layouts/expansion-panel/expansion-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..35a5642af7
--- /dev/null
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/layout.scss
@@ -0,0 +1,35 @@
+.sample-holder {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
+}
+
+.my-expansion-panel {
+  max-width: 500px;
+  min-width: 300px;
+  width: 100%;
+}
+
+.example-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  ::selection  {
+    background: #ECAA53
+  }
+  span {
+    display: block;
+    margin-bottom: 16px;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  width: 100%;
+  margin-bottom: 8px;
+  border-radius: 8px;
+}
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index b4637d08c7..6243a73522 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -23,6 +23,7 @@ export const layoutsRoutesData = {
     'expansion-sample-4': { displayName: 'Expansion Panel 4', parentName: 'Expansion Panel' },
     'expansion-sample-5': { displayName: 'Expansion Panel 5', parentName: 'Expansion Panel' },
     'expansion-styling': { displayName: 'Expansion Panel Styling', parentName: 'Expansion Panel' },
+    'expansion-tailwind-styling': { displayName: 'Expansion Panel Tailwind Styling', parentName: 'Expansion Panel' },
     'layout-direction-row': { displayName: 'Layout Direction Row', parentName: 'Layout' },
     'layout-direction-column': { displayName: 'Layout Direction Column', parentName: 'Layout' },
     'layout-custom-order': { displayName: 'Layout Custom Order', parentName: 'Layout' },
@@ -35,12 +36,14 @@ export const layoutsRoutesData = {
     'splitter-horizontal-sample': { displayName: 'Splitter Horizontal', parentName: 'Splitter' },
     'splitter-nested-sample': { displayName: 'Splitter Nested Panes', parentName: 'Splitter' },
     'splitter-styling-sample': { displayName: 'Splitter Styling', parentName: 'Splitter' },
+    'splitter-tailwind-styling-sample': { displayName: 'Splitter Tailwind Styling', parentName: 'Splitter' },
     'stepper-overview-sample': { displayName: 'Stepper Overview', parentName: 'Stepper' },
     'stepper-sample-reactive-forms': { displayName: 'Stepper Reactive Forms', parentName: 'Stepper' },
     'stepper-label-position-and-orientation-sample': { displayName: 'Stepper Label Position And Orientation', parentName: 'Stepper' },
     'stepper-linear-sample': { displayName: 'Linear Stepper', parentName: 'Stepper' },
     'stepper-steptypes-sample': { displayName: 'Stepper Step Types', parentName: 'Stepper' },
     'stepper-styling-sample': { displayName: 'Stepper Styling', parentName: 'Stepper' },
+    'stepper-tailwind-styling-sample': { displayName: 'Stepper Tailwind Styling', parentName: 'Stepper' },
     'tabbar-sample-1': { displayName: 'Bottom Navigation Simple Panels', parentName: 'Bottom Navigation' },
     'tabbar-sample-2': { displayName: 'Bottom Navigation Customizing Panels', parentName: 'Bottom Navigation' },
     'tabbar-sample-3': { displayName: 'Bottom Navigation Routing', parentName: 'Bottom Navigation' },
@@ -51,6 +54,7 @@ export const layoutsRoutesData = {
     'tabs-sample-3': { displayName: 'Tabs Customizing', parentName: 'Tabs' },
     'tabs-sample-4': { displayName: 'Tabs Routing', parentName: 'Tabs' },
     'tabs-style': { displayName: 'Tabs Styling', parentName: 'Tabs' },
+    'tabs-tailwind-style': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' },
     'tabs-alignment': { displayName: 'Tabs Alignment', parentName: 'Tabs' },
     'tabs-header-prefix-suffix': { displayName: 'Tabs Prefix/Suffix', parentName: 'Tabs' },
     'card-sample-0': { displayName: 'Elevated Card', parentName: 'Card' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index 0ac623f797..857d87a2d2 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -35,6 +35,7 @@ import { ExpansionPanelSample3Component } from './expansion-panel/expansion-samp
 import { ExpansionPanelSample4Component } from './expansion-panel/expansion-sample-4/expansion-sample-4.component';
 import { ExpansionPanelSample5Component } from './expansion-panel/expansion-sample-5/expansion-sample-5.component';
 import { ExpansionPanelStylingComponent } from './expansion-panel/expansion-styling/expansion-styling.component';
+import { ExpansionPanelTailwindStylingComponent } from './expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component';
 import { LayoutAlignItemsComponent } from './layout/layout-align-items/layout-align-items.component';
 import { LayoutContentSpaceComponent } from './layout/layout-content-space/layout-content-space.component';
 import { LayoutCustomOrderComponent } from './layout/layout-custom-order/layout-custom-order.component';
@@ -50,6 +51,7 @@ import {
 } from './splitter/splitter-horizontal-sample/splitter-horizontal-sample.component';
 import { SplitterNestedSampleComponent } from './splitter/splitter-nested-sample/splitter-nested-sample.component';
 import { SplitterStylingSampleComponent } from './splitter/splitter-styling-sample/splitter-styling-sample.component';
+import { SplitterTailwindStylingSampleComponent } from './splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component';
 import { TabbarSample1Component } from './tabbar/tabbar-sample-1/tabbar-sample-1.component';
 import { TabbarSample2Component } from './tabbar/tabbar-sample-2/tabbar-sample-2.component';
 import { TabbarSample3Component } from './tabbar/tabbar-sample-3/components/tabbar-sample-3.component';
@@ -63,6 +65,7 @@ import { TabsSample2Component } from './tabs/tabs-sample-2/tabs-sample-2.compone
 import { TabsSample3Component } from './tabs/tabs-sample-3/tabs-sample-3.component';
 import { TabsSample4Component } from './tabs/tabs-sample-4/components/tabs-sample-4.component';
 import { TabsStyleComponent } from './tabs/tabs-style/tabs-style.component';
+import { TabsTailwindStyleComponent } from './tabs/tabs-tailwind-style/tabs-tailwind-style.component';
 import { TabsAlignmentComponent } from './tabs/tabs-alignment/tabs-alignment.component';
 import { TabsHeaderPrefixSuffixComponent } from './tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix';
 import { View1Component } from './tabs/views/view1/view1.component';
@@ -77,6 +80,7 @@ import {StepperLabelPositionAndOrientationSampleComponent
 import { StepperLinearSampleComponent } from './stepper/stepper-linear-sample/stepper-linear-sample.component';
 import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sample/stepper-steptypes-sample.component';
 import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
+import { StepperTailwindStylingSampleComponent } from './stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component';
 import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
 import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component';
 import { TileManagerComponent } from './tile-manager/tile-manager-sample/tile-manager.component';
@@ -212,6 +216,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['expansion-styling'],
         path: 'expansion-styling'
     },
+    {
+        component: ExpansionPanelTailwindStylingComponent,
+        data: layoutsRoutesData['expansion-tailwind-styling'],
+        path: 'expansion-tailwind-styling'
+    },
     {
         component: LayoutDirectionRowComponent,
         data: layoutsRoutesData['layout-direction-row'],
@@ -272,6 +281,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['splitter-styling-sample'],
         path: 'splitter-styling-sample'
     },
+    {
+        component: SplitterTailwindStylingSampleComponent,
+        data: layoutsRoutesData['splitter-tailwind-styling-sample'],
+        path: 'splitter-tailwind-styling-sample'
+    },
     {
         component: StepperLabelPositionAndOrientationSampleComponent,
         data: layoutsRoutesData['stepper-label-position-and-orientation-sample'],
@@ -302,6 +316,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['stepper-styling-sample'],
         path: 'stepper-styling-sample'
     },
+    {
+        component: StepperTailwindStylingSampleComponent,
+        data: layoutsRoutesData['stepper-tailwind-styling-sample'],
+        path: 'stepper-tailwind-styling-sample'
+    },
     {
         component: TabbarSample1Component,
         data: layoutsRoutesData['tabbar-sample-1'],
@@ -360,6 +379,10 @@ export const LayoutsRoutes: Routes = [
         component: TabsStyleComponent,
         path: 'tabs-style'
     },
+    {
+        component: TabsTailwindStyleComponent,
+        path: 'tabs-tailwind-style'
+    },
     {
         component: TabsAlignmentComponent,
         path: 'tabs-alignment'
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..1441d2b196
--- /dev/null
+++ b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
@@ -0,0 +1,12 @@
+<igx-splitter class="!material-splitter-color-[#7B9E89] ![--size:7px]" style='height: 100vh;' [style.width]='"100%"'>
+    <igx-splitter-pane>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim.
+        </p>
+    </igx-splitter-pane>
+    <igx-splitter-pane>
+        <p>
+            Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl.
+        </p>
+    </igx-splitter-pane>
+</igx-splitter>
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.scss b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..50f8d3299f
--- /dev/null
+++ b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.scss
@@ -0,0 +1,3 @@
+p {
+  padding: 0 16px;
+}
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.ts b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..a89624e774
--- /dev/null
+++ b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { SplitterType, IgxSplitterComponent, IgxSplitterPaneComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-splitter-tailwind-styling-sample',
+    styleUrls: ['splitter-tailwind-styling-sample.component.scss'],
+    templateUrl: 'splitter-tailwind-styling-sample.component.html',
+    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
+})
+export class SplitterTailwindStylingSampleComponent {
+    public type = SplitterType.Horizontal;
+}
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/layout.scss b/src/app/layouts/stepper/stepper-tailwind-styling-sample/layout.scss
new file mode 100644
index 0000000000..107bb0eb30
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/layout.scss
@@ -0,0 +1,25 @@
+$sample-gap: 20px;
+
+igx-stepper {
+  display: block;
+  padding: $sample-gap;
+}
+
+.sample-split,
+.sample-step-actions {
+  display: flex;
+  gap: $sample-gap;
+}
+
+.sample-step-actions {
+  margin-top: $sample-gap * 2;
+}
+
+.sample-split {
+  > * {
+    max-width: 380px;
+    flex: 1;
+  }
+  
+  margin-bottom: $sample-gap;
+}
\ No newline at end of file
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
new file mode 100644
index 0000000000..9b19867e6b
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
@@ -0,0 +1,37 @@
+<igx-stepper class="!material-stepper-step-background-[#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
+    <ng-template igxStepActiveIndicator>
+        <igx-icon>edit</igx-icon>
+    </ng-template>
+    <ng-template igxStepCompletedIndicator>
+        <igx-icon>check</igx-icon>
+    </ng-template>
+    <igx-step>
+        <span igxStepTitle>Order</span>
+        <span igxStepSubtitle>required</span>
+        <div igxStepContent>
+            <div class="sample-step-actions">
+                <button igxButton="contained" (click)="stepper.next()">NEXT</button>
+            </div>
+        </div>
+    </igx-step>
+    <igx-step>
+        <span igxStepTitle>Payment</span>
+        <span igxStepSubtitle>Optional</span>
+        <div igxStepContent>
+            <div class="sample-step-actions">
+                <button igxButton="contained" (click)="stepper.prev()">PREVIOUS</button>
+                <button igxButton="contained" (click)="stepper.next()">NEXT</button>
+            </div>
+        </div>
+    </igx-step>
+    <igx-step>
+        <span igxStepTitle>Confirmation</span>
+        <span igxStepSubtitle>required</span>
+        <div igxStepContent>
+            <div class="sample-step-actions">
+                <button igxButton="contained" (click)="stepper.prev()">PREVIOUS</button>
+                <button igxButton="contained" (click)="reset()">RESET</button>
+            </div>
+        </div>
+    </igx-step>
+</igx-stepper>
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.scss b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.ts b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.ts
new file mode 100644
index 0000000000..da95cb2f8b
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.ts
@@ -0,0 +1,26 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxStepperComponent, IStepChangingEventArgs, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxButtonDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-stepper-tailwind-styling-sample',
+    styleUrls: ['./stepper-tailwind-styling-sample.component.scss'],
+    templateUrl: './stepper-tailwind-styling-sample.component.html',
+    imports: [IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxButtonDirective]
+})
+export class StepperTailwindStylingSampleComponent {
+    @ViewChild('stepper', { read: IgxStepperComponent })
+    public stepper: IgxStepperComponent;
+
+    public activeStepChanging(evt: IStepChangingEventArgs): void {
+        this.stepper.steps.forEach(step => {
+            if (step.index >= evt.oldIndex && step.index < evt.newIndex) {
+                step.completed = true;
+            }
+        });
+    }
+
+    public reset(): void {
+        this.stepper.steps.forEach(step => step.completed = false);
+        this.stepper.reset();
+    }
+}
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
new file mode 100644
index 0000000000..2c59a0ae8f
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
@@ -0,0 +1,30 @@
+<igx-tabs class="!material-tabs-background-[#769683] ![--item-active-icon-color:#FFD640] ![--item-active-color:#FFD640]">
+    <igx-tab-item>
+        <igx-tab-header>
+            <igx-icon igxTabHeaderIcon>library_music</igx-icon>
+            <span igxTabHeaderLabel>Albums</span>
+        </igx-tab-header>
+        <igx-tab-content>
+            Albums
+        </igx-tab-content>
+    </igx-tab-item>
+    <igx-tab-item>
+        <igx-tab-header>
+            <igx-icon igxTabHeaderIcon>favorite</igx-icon>
+            <span igxTabHeaderLabel>Favorite</span>
+        </igx-tab-header>
+        <igx-tab-content>
+            Favorite
+        </igx-tab-content>
+    </igx-tab-item>
+    <igx-tab-item>
+        <igx-tab-header>
+            <igx-icon igxTabHeaderIcon>info</igx-icon>
+            <span igxTabHeaderLabel>Details</span>
+        </igx-tab-header>
+        <igx-tab-content>
+            Details
+        </igx-tab-content>
+    </igx-tab-item>
+</igx-tabs>
+
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss
new file mode 100644
index 0000000000..3fc770ecd1
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss
@@ -0,0 +1,4 @@
+igx-tab-content {
+  padding: 8px;
+}
+
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts
new file mode 100644
index 0000000000..87d5d64132
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-tabs-tailwind-style',
+    styleUrls: ['./tabs-tailwind-style.component.scss'],
+    templateUrl: './tabs-tailwind-style.component.html',
+    imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent]
+})
+export class TabsTailwindStyleComponent { }
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
new file mode 100644
index 0000000000..ffa2c68255
--- /dev/null
+++ b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
@@ -0,0 +1,10 @@
+<div class="control-wrapper">
+    <igx-combo class="!material-combo-toggle-button-[#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
+        [groupKey]="'weaponRange'" placeholder="Pick up two weapons" searchPlaceholder="Search..."
+        [itemsMaxHeight]="255" (selectionChanging)="setWeaponsLimit($event)">
+    </igx-combo>
+
+    <igx-toast #loadToast [displayTime]="1200"></igx-toast>
+</div>
+
+
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.scss b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.scss
new file mode 100644
index 0000000000..d37b30c0b5
--- /dev/null
+++ b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.scss
@@ -0,0 +1,23 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+// $custom-drop-down-theme: drop-down-theme(
+//   $background-color: #57a5cd,
+// );
+
+// $custom-combo-theme: combo-theme(
+//   $search-separator-border-color: #1d3743,
+//   $toggle-button-background: #57a5cd,
+// );
+
+// $custom-checkbox-theme: checkbox-theme(
+//   $border-radius: 10px,
+//   $fill-color: #1d3743,
+//   $empty-color: #1d3743,
+// );
+
+// :host ::ng-deep {
+//   @include css-vars($custom-drop-down-theme);
+//   @include css-vars($custom-combo-theme);
+//   @include css-vars($custom-checkbox-theme);
+// }
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.ts b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.ts
new file mode 100644
index 0000000000..18343f78c5
--- /dev/null
+++ b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.ts
@@ -0,0 +1,32 @@
+import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { IComboSelectionChangingEventArgs, IgxToastComponent, VerticalAlignment, IgxComboComponent } from 'igniteui-angular';
+import { getHeroWeaponsData, IHeroWeapon } from '../../../data/heroData';
+
+@Component({
+    selector: 'app-combo-tailwind-styling',
+    styleUrls: ['./combo-tailwind-styling.component.scss'],
+    templateUrl: './combo-tailwind-styling.component.html',
+    imports: [IgxComboComponent, IgxToastComponent]
+})
+export class ComboTailwindStylingComponent implements OnInit {
+    elem = inject(ElementRef);
+
+    @ViewChild('loadToast', { read: IgxToastComponent, static: true })
+    public loadToast: IgxToastComponent;
+
+    public weaponsData: IHeroWeapon[] = [];
+
+    public ngOnInit() {
+        this.weaponsData = getHeroWeaponsData();
+    }
+
+    public setWeaponsLimit(event: IComboSelectionChangingEventArgs) {
+        this.loadToast.positionSettings.verticalDirection = VerticalAlignment.Middle;
+        // this.loadToast.autoHide = true;
+
+        if (event.newValue.length > 2) {
+            event.cancel = true;
+            this.loadToast.open('Choose only two items');
+        }
+    }
+}
diff --git a/src/app/lists/combo/combo-tailwind-styling/layout.scss b/src/app/lists/combo/combo-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..82f1579d5d
--- /dev/null
+++ b/src/app/lists/combo/combo-tailwind-styling/layout.scss
@@ -0,0 +1,3 @@
+.control-wrapper {
+  padding: 8px;
+}
\ No newline at end of file
diff --git a/src/app/lists/list/list-tailwind-styling/layout.scss b/src/app/lists/list/list-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..9f5ba3685f
--- /dev/null
+++ b/src/app/lists/list/list-tailwind-styling/layout.scss
@@ -0,0 +1,9 @@
+.list-sample {
+  display: block;
+  padding: 16px;
+}
+
+igx-icon {
+  cursor: pointer;
+  position: relative;
+}
\ No newline at end of file
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
new file mode 100644
index 0000000000..c0ad26169b
--- /dev/null
+++ b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
@@ -0,0 +1,15 @@
+<div class="list-sample">
+  <igx-list class="!material-list-background-[#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
+    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+    @for (contact of contacts; track contact) {
+      <igx-list-item #item>
+        <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
+        <span igxListLineTitle>{{ contact.name }}</span>
+        <span igxListLineSubTitle>{{ contact.phone }}</span>
+        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
+          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+        (mousedown)="mousedown($event)">star</igx-icon>
+      </igx-list-item>
+    }
+  </igx-list>
+</div>
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.scss b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.ts b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.ts
new file mode 100644
index 0000000000..392846afe3
--- /dev/null
+++ b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-list-tailwind-styling',
+    styleUrls: ['./list-tailwind-styling.component.scss'],
+    templateUrl: './list-tailwind-styling.component.html',
+    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective]
+})
+export class ListTailwindStylingComponent implements OnInit {
+    @ViewChild('mainIgxList', { static: true })
+    public list: IgxListComponent;
+
+    public contacts;
+
+    private dataSource = [{
+        isFavorite: false,
+        name: 'Terrance Orta',
+        phone: '770-504-2217',
+        photo: 'assets/images/men/27.jpg'
+    }, {
+        isFavorite: true,
+        name: 'Richard Mahoney',
+        phone: '423-676-2869',
+        photo: 'assets/images/men/1.jpg'
+    }, {
+        isFavorite: false,
+        name: 'Donna Price',
+        phone: '859-496-2817',
+        photo: 'assets/images/women/50.jpg'
+    }, {
+        isFavorite: false,
+        name: 'Lisa Landers',
+        phone: '901-747-3428',
+        photo: 'assets/images/women/3.jpg'
+    }, {
+        isFavorite: true,
+        name: 'Dorothy H. Spencer',
+        phone: '573-394-9254',
+        photo: 'assets/images/women/67.jpg'
+    }
+    ];
+
+    constructor() {
+    }
+
+    public ngOnInit() {
+        this.contacts = Object.assign([], this.dataSource);
+    }
+
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
+        contact.isFavorite = !contact.isFavorite;
+    }
+
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
+}
diff --git a/src/app/lists/lists-routes-data.ts b/src/app/lists/lists-routes-data.ts
index bf14a0304d..e2d25c0a23 100644
--- a/src/app/lists/lists-routes-data.ts
+++ b/src/app/lists/lists-routes-data.ts
@@ -7,6 +7,7 @@ export const listsRoutesData = {
     'combo-binding': { displayName: 'Combo Without ValueKey', parentName: 'Combo' },
     'combo-remote': { displayName: 'Remote Combo', parentName: 'Combo' },
     'combo-styling': { displayName: 'Combo Styling', parentName: 'Combo' },
+    'combo-tailwind-styling': { displayName: 'Combo Tailwind Styling', parentName: 'Combo' },
     'combo-template': { displayName: 'Templating Combo', parentName: 'Combo' },
     'combo-overlay': { displayName: 'Combo Overlay', parentName: 'Combo' },
     'simple-combo-main': { displayName: 'Main Simple Combo', parentName: 'Combo'},
@@ -23,10 +24,12 @@ export const listsRoutesData = {
     'list-sample-6': { displayName: 'List Loading', parentName: 'List' },
     'list-sample-7': { displayName: 'List Item Panning', parentName: 'List' },
     'list-sample-8': { displayName: 'List Theming', parentName: 'List' },
+    'list-tailwind-styling': { displayName: 'List Tailwind Styling', parentName: 'List' },
     'list-chat-sample': { displayName: 'Chat Component', parentName: 'List' },
     'list-item-selection': { displayName: 'List Item Selection', parentName: 'List' },
     // eslint-disable-next-line quote-props
     'tree-basic-sample': { displayName: 'Tree Basic Sample', parentName: 'Tree' },
     'tree-advanced-sample': { displayName: 'Tree Advanced Sample', parentName: 'Tree' },
-    'tree-styling': { displayName: 'Tree Styling', parentName: 'Tree' }
+    'tree-styling': { displayName: 'Tree Styling', parentName: 'Tree' },
+    'tree-tailwind-styling': { displayName: 'Tree Tailwind Styling', parentName: 'Tree' }
 };
diff --git a/src/app/lists/lists.routes.ts b/src/app/lists/lists.routes.ts
index 0b6fb43118..3036dba6b7 100644
--- a/src/app/lists/lists.routes.ts
+++ b/src/app/lists/lists.routes.ts
@@ -5,6 +5,7 @@ import { ComboMainComponent } from './combo/combo-main/combo-main.component';
 import { ComboOverlayComponent } from './combo/combo-overlay/combo-overlay.component';
 import { ComboRemoteComponent } from './combo/combo-remote/combo-remote.component';
 import { ComboStylingComponent } from './combo/combo-styling/combo-styling.component';
+import { ComboTailwindStylingComponent } from './combo/combo-tailwind-styling/combo-tailwind-styling.component';
 import { ComboValueKeyComponent } from './combo/combo-valuekey/combo-valuekey.component';
 import { ComboTemplateComponent } from './combo/combo-template/combo-template.component';
 import { ListChatSampleComponent } from './list/list-chat-sample/list-chat-sample.component';
@@ -16,11 +17,13 @@ import { ListSample5Component } from './list/list-sample-5/list-sample-5.compone
 import { ListSample6Component } from './list/list-sample-6/list-sample-6.component';
 import { ListSample7Component } from './list/list-sample-7/list-sample-7.component';
 import { ListSample8Component } from './list/list-sample-8/list-sample-8.component';
+import { ListTailwindStylingComponent } from './list/list-tailwind-styling/list-tailwind-styling.component';
 import { ListComponent } from './list/list.component';
 import { listsRoutesData } from './lists-routes-data';
 import { TreeBasicSampleComponent } from './tree/tree-basic-sample/tree-basic-sample.component';
 import { TreeAdvancedSampleComponent } from './tree/tree-advanced-sample/tree-advanced-sample.component';
 import { TreeStylingComponent } from './tree/tree-styling/tree-styling.component';
+import { TreeTailwindStylingComponent } from './tree/tree-tailwind-styling/tree-tailwind-styling.component';
 import { SimpleComboMainComponent } from './combo/simple-combo-main/simple-combo-main.component';
 import { SimpleComboUsageComponent } from './combo/simple-combo-usage/simple-combo-usage.component';
 import { SimpleComboCascadingComponent } from './combo/simple-combo-cascading/simple-combo-cascading.component';
@@ -49,6 +52,11 @@ export const ListsRoutes: Routes = [
         data: listsRoutesData['combo-styling'],
         path: 'combo-styling'
     },
+    {
+        component: ComboTailwindStylingComponent,
+        data: listsRoutesData['combo-tailwind-styling'],
+        path: 'combo-tailwind-styling'
+    },
     {
         component: ComboValueKeyComponent,
         data: listsRoutesData['combo-valuekey'],
@@ -139,6 +147,11 @@ export const ListsRoutes: Routes = [
         data: listsRoutesData['list-sample-8'],
         path: 'list-sample-8'
     },
+    {
+        component: ListTailwindStylingComponent,
+        data: listsRoutesData['list-tailwind-styling'],
+        path: 'list-tailwind-styling'
+    },
     {
         component: ListChatSampleComponent,
         data: listsRoutesData['list-chat-sample'],
@@ -163,5 +176,10 @@ export const ListsRoutes: Routes = [
         component: TreeStylingComponent,
         data: listsRoutesData['tree-styling'],
         path: 'tree-styling'
+    },
+    {
+        component: TreeTailwindStylingComponent,
+        data: listsRoutesData['tree-tailwind-styling'],
+        path: 'tree-tailwind-styling'
     }
 ];
diff --git a/src/app/lists/tree/tree-tailwind-styling/layout.scss b/src/app/lists/tree/tree-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..0df907352e
--- /dev/null
+++ b/src/app/lists/tree/tree-tailwind-styling/layout.scss
@@ -0,0 +1,11 @@
+.tree-root {
+  max-height: 360px;
+  overflow-y: auto;
+  width: 320px;
+}
+
+.sample-wrapper {
+  display: block;
+  margin: 0 auto;
+  padding: 16px;
+}
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
new file mode 100644
index 0000000000..ad957f6a04
--- /dev/null
+++ b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
@@ -0,0 +1,14 @@
+<div class="sample-wrapper">
+  <igx-tree class="tree-root">
+    @for (type of data; track type) {
+      <igx-tree-node class="!material-tree-background-[#81B698] ![--border-color:#D07A7A]">
+        {{ type.Name }}
+        @for (value of type.Children; track value) {
+          <igx-tree-node class="!material-tree-background-[#81B698] ![--border-color:#D07A7A]">
+            {{ value.Name }}
+          </igx-tree-node>
+        }
+      </igx-tree-node>
+    }
+  </igx-tree>
+</div>
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.scss b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.ts b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.ts
new file mode 100644
index 0000000000..f92e5960c7
--- /dev/null
+++ b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { DATA } from '../../../data/animations-data';
+import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-tree-tailwind-styling',
+    templateUrl: './tree-tailwind-styling.component.html',
+    styleUrls: ['./tree-tailwind-styling.component.scss'],
+    imports: [IgxTreeComponent, IgxTreeNodeComponent]
+})
+export class TreeTailwindStylingComponent {
+    public data = DATA;
+
+    constructor() { }
+
+}
diff --git a/src/app/menus/menus-routes-data.ts b/src/app/menus/menus-routes-data.ts
index c7e2e04881..43fc7e9647 100644
--- a/src/app/menus/menus-routes-data.ts
+++ b/src/app/menus/menus-routes-data.ts
@@ -4,6 +4,7 @@ export const menusRoutesData = {
     'navbar-sample-2': { displayName: 'Navbar Custom Action Icon', parentName: 'Navbar' },
     'navbar-sample-3': { displayName: 'Navbar Navigation Icon', parentName: 'Navbar' },
     'navbar-style': { displayName: 'Navbar Style', parentName: 'Navbar' },
+    'navbar-tailwind-style': { displayName: 'Navbar Tailwind Style', parentName: 'Navbar' },
     'navbar-custom-title': {displayName: 'Navbar Custom Title', parentName: 'Navbar'},
     'action-strip-paragraph': { displayName: 'Action Strip Paragraph', parentName: 'Action Strip' },
     'action-strip-paragraph-menu': { displayName: 'Action Strip Paragraph Menu', parentName: 'Action Strip' },
diff --git a/src/app/menus/menus.routes.ts b/src/app/menus/menus.routes.ts
index ddc2246f47..33e5dde5db 100644
--- a/src/app/menus/menus.routes.ts
+++ b/src/app/menus/menus.routes.ts
@@ -13,6 +13,7 @@ import { NavbarSample1Component } from './navbar/navbar-sample-1/navbar-sample-1
 import { NavbarSample2Component } from './navbar/navbar-sample-2/navbar-sample-2.component';
 import { NavbarSample3Component } from './navbar/navbar-sample-3/navbar-sample-3.component';
 import { NavbarStyleComponent } from './navbar/navbar-style/navbar-style.component';
+import { NavbarTailwindStyleComponent } from './navbar/navbar-tailwind-style/navbar-tailwind-style.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { NavDrawerMiniComponent } from './navdrawer/nav-drawer-mini/nav-drawer-mini.component';
 import { NavDrawerPinComponent } from './navdrawer/nav-drawer-pin/nav-drawer-pin.component';
@@ -109,6 +110,11 @@ export const MenusRoutes: Routes = [
         data: menusRoutesData['navbar-style'],
         path: 'navbar-style'
     },
+    {
+        component: NavbarTailwindStyleComponent,
+        data: menusRoutesData['navbar-tailwind-style'],
+        path: 'navbar-tailwind-style'
+    },
     {
         component: NavbarCustomTitleComponent,
         data: menusRoutesData['navbar-custom-title'],
diff --git a/src/app/menus/navbar/navbar-style/navbar-style.component.scss b/src/app/menus/navbar/navbar-style/navbar-style.component.scss
index 117e7da741..5084f51fd8 100644
--- a/src/app/menus/navbar/navbar-style/navbar-style.component.scss
+++ b/src/app/menus/navbar/navbar-style/navbar-style.component.scss
@@ -2,7 +2,11 @@
 
 $custom-navbar-theme: navbar-theme(
   $background: #011627,
-  $idle-icon-color: #ecaa53,
+);
+
+$custom-icon-button-theme: flat-icon-button-theme(
+  $foreground: #ecaa53,
 );
 
 @include css-vars($custom-navbar-theme);
+@include css-vars($custom-icon-button-theme);
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
new file mode 100644
index 0000000000..94e9b6a2b4
--- /dev/null
+++ b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
@@ -0,0 +1,19 @@
+<div class="sample-column">
+    <igx-navbar class="!material-navbar-background-[#7B9E89] ![--text-color:#121E17]" title="Sample App">
+        <igx-navbar-action>
+            <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+                <igx-icon>menu</igx-icon>
+            </button>
+        </igx-navbar-action>
+
+        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <igx-icon>search</igx-icon>
+        </button>
+        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <igx-icon>favorite</igx-icon>
+        </button>
+        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <igx-icon>more_vert</igx-icon>
+        </button>
+    </igx-navbar>
+</div>
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.scss b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.ts b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.ts
new file mode 100644
index 0000000000..4720c0f2de
--- /dev/null
+++ b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-navbar-tailwind-style',
+    styleUrls: ['./navbar-tailwind-style.component.scss'],
+    templateUrl: './navbar-tailwind-style.component.html',
+    imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxIconButtonDirective, IgxIconComponent]
+})
+
+export class NavbarTailwindStyleComponent { }
diff --git a/src/app/notifications/notifications-routes-data.ts b/src/app/notifications/notifications-routes-data.ts
index 4b9043b178..49f56a3d35 100644
--- a/src/app/notifications/notifications-routes-data.ts
+++ b/src/app/notifications/notifications-routes-data.ts
@@ -10,10 +10,12 @@ export const notificationsRoutesData = {
     'snackbar-sample-4': { displayName: 'Snackbar in List', parentName: 'Snackbar' },
     'snackbar-sample-5': { displayName: 'Display custom content', parentName: 'Snackbar' },
     'snackbar-style': { displayName: 'Snackbar Style', parentName: 'Snackbar' },
+    'snackbar-tailwind-style': { displayName: 'Snackbar Tailwind Style', parentName: 'Snackbar' },
     'toast-sample-1': { displayName: 'Toast Overview', parentName: 'Toast' },
     'toast-sample-2': { displayName: 'Show Toast', parentName: 'Toast' },
     'toast-sample-3': { displayName: 'Hide/Auto Hide Toast', parentName: 'Toast' },
     'toast-sample-4': { displayName: 'Toast Display Time', parentName: 'Toast' },
     'toast-sample-5': { displayName: 'Toast Positioning', parentName: 'Toast' },
-    'toast-style': { displayName: 'Toast Style', parentName: 'Toast' }
+    'toast-style': { displayName: 'Toast Style', parentName: 'Toast' },
+    'toast-tailwind-style': { displayName: 'Toast Tailwind Style', parentName: 'Toast' }
 };
diff --git a/src/app/notifications/notifications.routes.ts b/src/app/notifications/notifications.routes.ts
index 18f8af8823..9181ecae71 100644
--- a/src/app/notifications/notifications.routes.ts
+++ b/src/app/notifications/notifications.routes.ts
@@ -11,12 +11,14 @@ import { SnackbarSample2Component } from './snackbar/snackbar-sample-2/snackbar-
 import { SnackbarSample4Component } from './snackbar/snackbar-sample-4/snackbar-sample-4.component';
 import { SnackbarSample5Component } from './snackbar/snackbar-sample-5/snackbar-sample-5.component';
 import { SnackbarStyleComponent } from './snackbar/snackbar-style/snackbar-style.component';
+import { SnackbarTailwindStyleComponent } from './snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component';
 import { ToastSample1Component } from './toast/toast-sample-1/toast-sample-1.component';
 import { ToastSample2Component } from './toast/toast-sample-2/toast-sample-2.component';
 import { ToastSample3Component } from './toast/toast-sample-3/toast-sample-3.component';
 import { ToastSample4Component } from './toast/toast-sample-4/toast-sample-4.component';
 import { ToastSample5Component } from './toast/toast-sample-5/toast-sample-5.component';
 import { ToastStyleComponent } from './toast/toast-style/toast-style.component';
+import { ToastTailwindStyleComponent } from './toast/toast-tailwind-style/toast-tailwind-style.component';
 
 export const NotificationsRoutes: Routes = [
     {
@@ -69,6 +71,11 @@ export const NotificationsRoutes: Routes = [
         data: notificationsRoutesData['snackbar-style'],
         path: 'snackbar-style'
     },
+    {
+        component: SnackbarTailwindStyleComponent,
+        data: notificationsRoutesData['snackbar-tailwind-style'],
+        path: 'snackbar-tailwind-style'
+    },
     {
         component: SnackbarSample5Component,
         data: notificationsRoutesData['snackbar-sample-5'],
@@ -103,5 +110,10 @@ export const NotificationsRoutes: Routes = [
         component: ToastStyleComponent,
         data: notificationsRoutesData['toast-style'],
         path: 'toast-style'
+    },
+    {
+        component: ToastTailwindStyleComponent,
+        data: notificationsRoutesData['toast-tailwind-style'],
+        path: 'toast-tailwind-style'
     }
 ];
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
new file mode 100644
index 0000000000..be32ea9e3c
--- /dev/null
+++ b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
@@ -0,0 +1,13 @@
+<button igxButton="contained" (click)="snackbar.open()">Send message</button>
+<div>
+  <igx-snackbar
+  class="!material-snackbar-background-[#7B9E89]
+  ![--button-color:#DD0D4B]"
+  #snackbar
+  [autoHide]="false"
+  [outlet]="elem"
+  actionText="Close"
+  (clicked)="close(snackbar)">
+    Message sent
+  </igx-snackbar>
+</div>
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.scss b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.ts b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.ts
new file mode 100644
index 0000000000..51cdb447e5
--- /dev/null
+++ b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.ts
@@ -0,0 +1,17 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { IgxButtonDirective, IgxSnackbarComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-snackbar-tailwind-style',
+    styleUrls: ['./snackbar-tailwind-style.component.scss'],
+    templateUrl: './snackbar-tailwind-style.component.html',
+    imports: [IgxButtonDirective, IgxSnackbarComponent]
+})
+export class SnackbarTailwindStyleComponent {
+  elem = inject(ElementRef);
+
+
+  public close(element) {
+    element.close();
+  }
+}
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
new file mode 100644
index 0000000000..3bdbc7f2f6
--- /dev/null
+++ b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
@@ -0,0 +1,11 @@
+<div class="sample-wrapper">
+    <article class="sample-column">
+        <div class="preview bottom"></div>
+        <div class="btn-group">
+            <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Bottom)" [disabled]="toast.isVisible">Show Toast</button>
+            <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
+        </div>
+    </article>
+
+    <igx-toast class="!material-toast-background-[#90B69F] ![--border-radius:6px]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
+</div>
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.scss b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.scss
new file mode 100644
index 0000000000..8a065ce4ef
--- /dev/null
+++ b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.scss
@@ -0,0 +1,3 @@
+[igxButton] {
+    margin-inline-end: 8px;
+}
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.ts b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.ts
new file mode 100644
index 0000000000..c117f9d873
--- /dev/null
+++ b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.ts
@@ -0,0 +1,21 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { IgxToastComponent, VerticalAlignment, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-toast-tailwind-style',
+    styleUrls: ['./toast-tailwind-style.component.scss'],
+    templateUrl: './toast-tailwind-style.component.html',
+    imports: [IgxButtonDirective, IgxRippleDirective, IgxToastComponent]
+})
+export class ToastTailwindStyleComponent {
+    elem = inject(ElementRef);
+
+    public toast: IgxToastComponent;
+    public position = VerticalAlignment;
+
+    openToast(toast: IgxToastComponent, pos: VerticalAlignment) {
+        toast.positionSettings.verticalDirection = pos;
+        toast.open();
+    }
+}
+
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
index a2ddca3e91..066719300b 100644
--- a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
@@ -1,4 +1,3 @@
 <article class="calendar-wrapper">
     <igx-calendar class="!material-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
 </article>
-
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss
new file mode 100644
index 0000000000..5d48b301ea
--- /dev/null
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/layout.scss
@@ -0,0 +1,4 @@
+igx-month-picker {
+  --ig-size: 2;
+  max-width: 400px;
+}
\ No newline at end of file
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
new file mode 100644
index 0000000000..aa32c10082
--- /dev/null
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
@@ -0,0 +1 @@
+<igx-month-picker class="!material-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a60d456faa
--- /dev/null
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.scss
@@ -0,0 +1 @@
+@use "layout.scss";
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.ts b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.ts
new file mode 100644
index 0000000000..a0d9611b0c
--- /dev/null
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IgxMonthPickerComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-monthpicker-tailwind-styling',
+    styleUrls: ['./monthpicker-tailwind-styling.component.scss'],
+    templateUrl: './monthpicker-tailwind-styling.component.html',
+    imports: [IgxMonthPickerComponent]
+})
+export class MonthpickerTailwindStylingComponent {
+    public date = new Date();
+}
diff --git a/src/app/scheduling/scheduling-routes-data.ts b/src/app/scheduling/scheduling-routes-data.ts
index c1ac3446d2..5aebfb559f 100644
--- a/src/app/scheduling/scheduling-routes-data.ts
+++ b/src/app/scheduling/scheduling-routes-data.ts
@@ -33,6 +33,7 @@ export const schedulingRoutesData = {
     'monthpicker-sample-1': { displayName: 'Default Month Picker', parentName: 'Monthpicker' },
     'monthpicker-sample-3': { displayName: 'Localized Month Picker', parentName: 'Monthpicker' },
     'monthpicker-styling': { displayName: 'Styled Month Picker', parentName: 'Monthpicker' },
+    'monthpicker-tailwind-styling': { displayName: 'Tailwind Styled Month Picker', parentName: 'Monthpicker' },
     'timepicker-dropdown': { displayName: 'Timepicker Overview', parentName: 'Timepicker' },
     'timepicker-sample-1': { displayName: 'Timepicker Dialog', parentName: 'Timepicker' },
     'timepicker-sample-4': { displayName: 'Timepicker Validation', parentName: 'Timepicker' },
diff --git a/src/app/scheduling/scheduling.routes.ts b/src/app/scheduling/scheduling.routes.ts
index 25bb5dfe26..386e78dc02 100644
--- a/src/app/scheduling/scheduling.routes.ts
+++ b/src/app/scheduling/scheduling.routes.ts
@@ -42,6 +42,7 @@ import { DateTimeBasicComponent } from './datetimeeditor/datetime-basic/datetime
 import { MonthpickerSample1Component } from './monthpicker/monthpicker-sample-1/monthpicker-sample-1.component';
 import { MonthpickerSample3Component } from './monthpicker/monthpicker-sample-3/monthpicker-sample-3.component';
 import { MonthpickerStylingComponent } from './monthpicker/monthpicker-styling/monthpicker-styling.component';
+import { MonthpickerTailwindStylingComponent } from './monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component';
 import { schedulingRoutesData } from './scheduling-routes-data';
 import { TimepickerDropdownComponent } from './timepicker/timepicker-dropdown/timepicker-dropdown.component';
 import { TimePickerSample1Component } from './timepicker/timepicker-sample-1/timepicker-sample-1.component';
@@ -236,6 +237,11 @@ export const SchedulingRoutes: Routes = [
         data: schedulingRoutesData['monthpicker-styling'],
         path: 'monthpicker-styling'
     },
+    {
+        component: MonthpickerTailwindStylingComponent,
+        data: schedulingRoutesData['monthpicker-tailwind-styling'],
+        path: 'monthpicker-tailwind-styling'
+    },
     {
         component: CalendarMultiViewComponent,
         data: schedulingRoutesData['multiview-calendar'],

From a7b9bd1cea4070d1a9eb8e2486a07174b60c1473 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Mon, 15 Sep 2025 15:46:39 +0300
Subject: [PATCH 03/11] refactor(tailwind): update samples with new utilities

---
 .../badge-tailwind-styling-sample.component.html       |  2 +-
 .../chip-tailwind-styling.component.html               |  2 +-
 .../icon-tailwind-styling-sample.component.html        |  2 +-
 .../button-group-tailwind-style.component.html         |  2 +-
 .../buttons-tailwind-style.component.html              |  8 ++++----
 .../checkbox-tailwind-styling.component.html           |  2 +-
 .../icon-button-tailwind-styling.component.html        |  6 +++---
 .../input-group-tailwind-styling.component.html        |  6 +++---
 .../radio-tailwind-styling-sample.component.html       | 10 +++++-----
 .../select-tailwind-styling.component.html             |  2 +-
 .../switch-tailwind-styling.component.html             |  2 +-
 .../query-builder-tailwind-style.component.html        |  2 +-
 .../slider-tailwind-styling.component.html             |  2 +-
 .../tooltip-tailwind-style.component.html              |  2 +-
 .../avatar-tailwind-styling.component.html             |  2 +-
 .../card-tailwind-styling-sample.component.html        |  2 +-
 .../expansion-tailwind-styling.component.html          |  2 +-
 .../splitter-tailwind-styling-sample.component.html    |  2 +-
 .../stepper-tailwind-styling-sample.component.html     |  2 +-
 .../tabbar-tailwind-style.component.html               |  2 +-
 .../tabs-tailwind-style.component.html                 |  2 +-
 .../combo-tailwind-styling.component.html              |  2 +-
 .../list-tailwind-styling.component.html               |  2 +-
 .../tree-tailwind-styling.component.html               |  4 ++--
 .../navbar-tailwind-style.component.html               | 10 +++++-----
 .../snackbar-tailwind-style.component.html             |  2 +-
 .../toast-tailwind-style.component.html                |  2 +-
 .../calendar-tailwind-styling-sample.component.html    |  2 +-
 .../monthpicker-tailwind-styling.component.html        |  2 +-
 src/styles.scss                                        |  3 ++-
 30 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
index ec1728048c..c9ab344b58 100644
--- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
@@ -7,7 +7,7 @@
       <div class="wrapper">
         <div>
           <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style !material-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
         </div>
         <div class="contact-container">
           <span class="contact-name">{{ member.name }}</span>
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
index bda3e01f65..9c9e15bf5c 100644
--- a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
+++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
@@ -1,7 +1,7 @@
 <igx-chips-area (reorder)="chipsOrderChanged($event)">
   @for (chip of chipList; track chip) {
     <igx-chip
-      class="!material-chip-color-[#99BAA6]
+      class="!light-chip-color-[#99BAA6]
       ![--remove-icon-color:#C92828]"
       [id]="chip.id"
       [selectable]="true"
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
index a5ed41344e..13839518d3 100644
--- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
+++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
@@ -1 +1 @@
-<igx-icon class="!material-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>
+<igx-icon class="!light-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
index 0b8da33d47..95bd5bc535 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-buttongroup class="!material-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
+    <igx-buttongroup class="!light-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
         <button igxButton igxRipple="white">Sofia</button>
         <button igxButton igxRipple="white">London</button>
         <button igxButton igxRipple="white">New York</button>
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
index eb9d5e233d..046ce36a9e 100644
--- a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
@@ -1,14 +1,14 @@
 <div class="buttons-sample">
   <div class="button-sample">
-    <button igxButton="flat" class="!material-flat-button-color-[#7B9E89]">Flat Button</button>
+    <button igxButton="flat" class="!light-flat-button-color-[#7B9E89]">Flat Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="contained" class="!material-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
+    <button igxButton="contained" class="!light-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="outlined" class="!material-outlined-button-color-[#7B9E89]">Outlined Button</button>
+    <button igxButton="outlined" class="!light-outlined-button-color-[#7B9E89]">Outlined Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="fab" class="!material-fab-button-color-[#7B9E89]">Fab Button</button>
+    <button igxButton="fab" class="!light-fab-button-color-[#7B9E89]">Fab Button</button>
   </div>
 </div>
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
index 00c63667f5..a02222dbe0 100644
--- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
@@ -1,3 +1,3 @@
-<igx-checkbox class="!material-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
+<igx-checkbox class="!light-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
     Styled checkbox
 </igx-checkbox>
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
index 5e168aa9fa..76d359e46d 100644
--- a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
+++ b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
@@ -1,16 +1,16 @@
 <div class="wrapper">
     <div class="button-sample">
-        <button class="!material-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
+        <button class="!light-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!material-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
+        <button class="!light-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!material-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
+        <button class="!light-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
             <igx-icon>home</igx-icon>
         </button>
     </div>
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
index 6b06f26e08..265473c2f7 100644
--- a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-input-group class="!material-input-box-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
+    <igx-input-group class="!light-input-box-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -9,7 +9,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!material-input-border-color-[#7B9E89]" type="border">
+    <igx-input-group class="!light-input-border-color-[#7B9E89]" type="border">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -19,7 +19,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!material-input-search-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
+    <igx-input-group class="!light-input-search-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Search</label>
         <input type="tel" igxInput name="phone" />
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
index 5ab17e039c..61518e96bb 100644
--- a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
@@ -1,7 +1,7 @@
 <div class="radio-wrapper">
-  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
-  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
-  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
-  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
-  <igx-radio class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
+  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
+  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
+  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
+  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
+  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
 </div>
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
index 1817af0947..76d2d6cd8f 100644
--- a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
+++ b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="select-wrapper">
-  <igx-select class="!material-select-toggle-button-[#99BAA6] ![toggle-button-background-focus:#7B9E89]" [overlaySettings]="customOverlaySettings">
+  <igx-select class="!light-select-toggle-button-[#99BAA6] ![toggle-button-background-focus:#7B9E89]" [overlaySettings]="customOverlaySettings">
     <label igxLabel>Select An Item</label>
     @for (item of items; track item) {
       <igx-select-item [value]="item">
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
index 8ac6096b0d..883bef239e 100644
--- a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
+++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
@@ -1,6 +1,6 @@
 <div class="switch-wrapper">
   @for (setting of settings; track setting) {
-    <igx-switch class="!material-switch-color-[#7B9E89] ![--label-color:#4F6A5A]" [checked]="setting.state">
+    <igx-switch class="!light-switch-color-[#7B9E89] ![--label-color:#4F6A5A]" [checked]="setting.state">
       {{ setting.name }}
     </igx-switch>
   }
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
index d10f51d5d0..e8f53ab515 100644
--- a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
+++ b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <igx-query-builder class="!material-query-builder-background-[#90B69F] ![--label-foreground:#121E17]" #queryBuilder
+    <igx-query-builder class="!light-query-builder-background-[#90B69F] ![--label-foreground:#121E17]" #queryBuilder
         [entities]="entities">
     </igx-query-builder>
 </div>
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
index 2e5828b820..ef9a6d33ff 100644
--- a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
+++ b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <igx-slider
-        class="!material-slider-color-[#7B9E89]
+        class="!light-slider-color-[#7B9E89]
         ![--track-step-color:#B9375D]"
         [step]="10"
         [maxValue]="100"
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
index 11057995a3..56465ba8ec 100644
--- a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
+++ b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
@@ -4,7 +4,7 @@
 </igx-avatar>
 
 <div #outlet="overlay-outlet" igxOverlayOutlet>
-    <div class="!material-tooltip-background-[#90B69F] ![--border-radius:6px]" #tooltipRef="tooltip" igxTooltip>
+    <div class="!light-tooltip-background-[#90B69F] ![--border-radius:6px]" #tooltipRef="tooltip" igxTooltip>
         Her name is Madelyn James
     </div>
 </div>
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index 10443232fc..cefd614e61 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-avatar class="!material-avatar-background-[#FF4E00] ![--color:#011627]" initials="DY" shape="rounded"></igx-avatar>
+<igx-avatar class="!light-avatar-background-[#FF4E00] ![--color:#011627]" initials="DY" shape="rounded"></igx-avatar>
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
index 434d4e916a..24cef5453e 100644
--- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
+++ b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
@@ -1,5 +1,5 @@
 <div class="sample-column card-wrapper">
-  <igx-card class="!material-card-background-[#193625] ![--subtitle-text-color:#ECAA53]" elevated>
+  <igx-card class="!light-card-background-[#193625] ![--subtitle-text-color:#ECAA53]" elevated>
     <igx-card-media height="180px">
       <img [src]="card.imageUrl">
     </igx-card-media>
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
index 0dd0eeaac6..c0506fffce 100644
--- a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="sample-holder">
-    <igx-expansion-panel class="my-expansion-panel !material-expansion-panel-header-background-[#4F6A5A] ![--body-background:#A3C7B2]">
+    <igx-expansion-panel class="my-expansion-panel !light-expansion-panel-header-background-[#4F6A5A] ![--body-background:#A3C7B2]">
         <igx-expansion-panel-header [iconPosition]="'right'">
             <igx-expansion-panel-title>
                 Golden Retriever
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
index 1441d2b196..9f04251f8a 100644
--- a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
+++ b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-splitter class="!material-splitter-color-[#7B9E89] ![--size:7px]" style='height: 100vh;' [style.width]='"100%"'>
+<igx-splitter class="!light-splitter-color-[#7B9E89] ![--size:7px]" style='height: 100vh;' [style.width]='"100%"'>
     <igx-splitter-pane>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim.
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
index 9b19867e6b..4fb5d199fe 100644
--- a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-stepper class="!material-stepper-step-background-[#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
+<igx-stepper class="!light-stepper-step-background-[#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
     <ng-template igxStepActiveIndicator>
         <igx-icon>edit</igx-icon>
     </ng-template>
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
index c9ea7fa367..1f1cc0e6a3 100644
--- a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-bottom-nav class="!material-bottom-nav-background-[#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
+<igx-bottom-nav class="!light-bottom-nav-background-[#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
   <igx-bottom-nav-item>
     <igx-bottom-nav-header>
       <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
index 2c59a0ae8f..f0a88bccd4 100644
--- a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
+++ b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-tabs class="!material-tabs-background-[#769683] ![--item-active-icon-color:#FFD640] ![--item-active-color:#FFD640]">
+<igx-tabs class="!light-tabs-background-[#769683] ![--item-active-icon-color:#FFD640] ![--item-active-color:#FFD640]">
     <igx-tab-item>
         <igx-tab-header>
             <igx-icon igxTabHeaderIcon>library_music</igx-icon>
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
index ffa2c68255..78aa3fb339 100644
--- a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
+++ b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="control-wrapper">
-    <igx-combo class="!material-combo-toggle-button-[#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
+    <igx-combo class="!light-combo-toggle-button-[#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
         [groupKey]="'weaponRange'" placeholder="Pick up two weapons" searchPlaceholder="Search..."
         [itemsMaxHeight]="255" (selectionChanging)="setWeaponsLimit($event)">
     </igx-combo>
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
index c0ad26169b..15adcc3875 100644
--- a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
+++ b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="list-sample">
-  <igx-list class="!material-list-background-[#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
+  <igx-list class="!light-list-background-[#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
     <igx-list-item [isHeader]="true">Contacts</igx-list-item>
     @for (contact of contacts; track contact) {
       <igx-list-item #item>
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
index ad957f6a04..47424cfa1d 100644
--- a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
+++ b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
@@ -1,10 +1,10 @@
 <div class="sample-wrapper">
   <igx-tree class="tree-root">
     @for (type of data; track type) {
-      <igx-tree-node class="!material-tree-background-[#81B698] ![--border-color:#D07A7A]">
+      <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
         {{ type.Name }}
         @for (value of type.Children; track value) {
-          <igx-tree-node class="!material-tree-background-[#81B698] ![--border-color:#D07A7A]">
+          <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
             {{ value.Name }}
           </igx-tree-node>
         }
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
index 94e9b6a2b4..e5eafe2896 100644
--- a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
+++ b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
@@ -1,18 +1,18 @@
 <div class="sample-column">
-    <igx-navbar class="!material-navbar-background-[#7B9E89] ![--text-color:#121E17]" title="Sample App">
+    <igx-navbar class="!light-navbar-background-[#7B9E89] ![--text-color:#121E17]" title="Sample App">
         <igx-navbar-action>
-            <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
                 <igx-icon>menu</igx-icon>
             </button>
         </igx-navbar-action>
 
-        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
             <igx-icon>search</igx-icon>
         </button>
-        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
             <igx-icon>favorite</igx-icon>
         </button>
-        <button class="!material-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
             <igx-icon>more_vert</igx-icon>
         </button>
     </igx-navbar>
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
index be32ea9e3c..001907fa73 100644
--- a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
+++ b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
@@ -1,7 +1,7 @@
 <button igxButton="contained" (click)="snackbar.open()">Send message</button>
 <div>
   <igx-snackbar
-  class="!material-snackbar-background-[#7B9E89]
+  class="!light-snackbar-background-[#7B9E89]
   ![--button-color:#DD0D4B]"
   #snackbar
   [autoHide]="false"
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
index 3bdbc7f2f6..82f22cb06a 100644
--- a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
+++ b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
@@ -7,5 +7,5 @@
         </div>
     </article>
 
-    <igx-toast class="!material-toast-background-[#90B69F] ![--border-radius:6px]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
+    <igx-toast class="!light-toast-background-[#90B69F] ![--border-radius:6px]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
 </div>
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
index 066719300b..42be4593b4 100644
--- a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
@@ -1,3 +1,3 @@
 <article class="calendar-wrapper">
-    <igx-calendar class="!material-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
+    <igx-calendar class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
 </article>
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
index aa32c10082..c11a18d87b 100644
--- a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-month-picker class="!material-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>
+<igx-month-picker class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>
diff --git a/src/styles.scss b/src/styles.scss
index da822ab2dc..16c8722ea8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
 @use 'igniteui-angular/theming' as *;
-@use 'igniteui-theming/tailwind/theme.css';
+@use 'igniteui-theming/tailwind/themes/base.css';
+@use 'igniteui-theming/tailwind/utilities/material.css';
 @use 'variables' as *;
 @use 'app-layout';
 @import "tailwindcss";

From a5a8d836479a3611d03c5995fe458205b8aca611 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 17 Sep 2025 10:07:06 +0300
Subject: [PATCH 04/11] refactor(tailwind): update tailwind samples after
 refactoring

---
 .../badge-tailwind-styling-sample.component.html       |  2 +-
 .../chip-tailwind-styling.component.html               |  2 +-
 .../icon-tailwind-styling-sample.component.html        |  2 +-
 .../button-group-tailwind-style.component.html         |  2 +-
 .../buttons-tailwind-style.component.html              |  8 ++++----
 .../checkbox-tailwind-styling.component.html           |  2 +-
 .../icon-button-tailwind-styling.component.html        |  6 +++---
 .../input-group-tailwind-styling.component.html        |  6 +++---
 .../radio-tailwind-styling-sample.component.html       | 10 +++++-----
 .../select-tailwind-styling.component.html             |  2 +-
 .../switch-tailwind-styling.component.html             |  2 +-
 .../query-builder-tailwind-style.component.html        |  2 +-
 .../slider-tailwind-styling.component.html             |  3 +--
 .../tooltip-tailwind-style.component.html              |  2 +-
 .../avatar-tailwind-styling.component.html             |  2 +-
 .../card-tailwind-styling-sample.component.html        |  2 +-
 .../expansion-tailwind-styling.component.html          |  2 +-
 .../splitter-tailwind-styling-sample.component.html    |  2 +-
 .../stepper-tailwind-styling-sample.component.html     |  2 +-
 .../tabbar-tailwind-style.component.html               |  2 +-
 .../tabs-tailwind-style.component.html                 |  2 +-
 .../combo-tailwind-styling.component.html              |  2 +-
 .../list-tailwind-styling.component.html               |  2 +-
 .../tree-tailwind-styling.component.html               |  4 ++--
 .../navbar-tailwind-style.component.html               | 10 +++++-----
 .../snackbar-tailwind-style.component.html             |  2 +-
 .../toast-tailwind-style.component.html                |  2 +-
 .../calendar-tailwind-styling-sample.component.html    |  2 +-
 .../monthpicker-tailwind-styling.component.html        |  2 +-
 29 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
index c9ab344b58..04baf683d6 100644
--- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
@@ -7,7 +7,7 @@
       <div class="wrapper">
         <div>
           <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![background:#FF4E00] ![--border-radius:4px]"></igx-badge>
         </div>
         <div class="contact-container">
           <span class="contact-name">{{ member.name }}</span>
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
index 9c9e15bf5c..9e7d4e2a79 100644
--- a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
+++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
@@ -1,7 +1,7 @@
 <igx-chips-area (reorder)="chipsOrderChanged($event)">
   @for (chip of chipList; track chip) {
     <igx-chip
-      class="!light-chip-color-[#99BAA6]
+      class="!light-chip ![--background:#99BAA6]
       ![--remove-icon-color:#C92828]"
       [id]="chip.id"
       [selectable]="true"
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
index 13839518d3..9ee3ab6090 100644
--- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
+++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
@@ -1 +1 @@
-<igx-icon class="!light-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>
+<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
index 95bd5bc535..868c9452a4 100644
--- a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-buttongroup class="!light-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
+    <igx-buttongroup class="!light-button-group ![--item-background:#7B9E89]">
         <button igxButton igxRipple="white">Sofia</button>
         <button igxButton igxRipple="white">London</button>
         <button igxButton igxRipple="white">New York</button>
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
index 046ce36a9e..51cc42daa2 100644
--- a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
+++ b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
@@ -1,14 +1,14 @@
 <div class="buttons-sample">
   <div class="button-sample">
-    <button igxButton="flat" class="!light-flat-button-color-[#7B9E89]">Flat Button</button>
+    <button igxButton="flat" class="!light-flat-button ![--foreground:#7B9E89]">Flat Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="contained" class="!light-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
+    <button igxButton="contained" class="!light-contained-button ![--background:#7B9E89]">Contained Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="outlined" class="!light-outlined-button-color-[#7B9E89]">Outlined Button</button>
+    <button igxButton="outlined" class="!light-outlined-button ![--foreground:#7B9E89]">Outlined Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="fab" class="!light-fab-button-color-[#7B9E89]">Fab Button</button>
+    <button igxButton="fab" class="!light-fab-button ![--background:#7B9E89]">Fab Button</button>
   </div>
 </div>
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
index a02222dbe0..d427737911 100644
--- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
+++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
@@ -1,3 +1,3 @@
-<igx-checkbox class="!light-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
+<igx-checkbox class="!light-checkbox ![--empty-color:#7B9E89] ![--fill-color:#7B9E89]" [checked]="true">
     Styled checkbox
 </igx-checkbox>
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
index 76d359e46d..ce62dd2335 100644
--- a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
+++ b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
@@ -1,16 +1,16 @@
 <div class="wrapper">
     <div class="button-sample">
-        <button class="!light-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#7B9E89]" igxIconButton="flat">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!light-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
+        <button class="!light-contained-icon-button ![--background:#7B9E89]" igxIconButton="contained">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!light-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
+        <button class="!light-outlined-icon-button ![--foreground:#7B9E89]" igxIconButton="outlined">
             <igx-icon>home</igx-icon>
         </button>
     </div>
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
index 265473c2f7..09ff6f5270 100644
--- a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
+++ b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-input-group class="!light-input-box-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
+    <igx-input-group class="!light-input-group ![--box-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -9,7 +9,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!light-input-border-color-[#7B9E89]" type="border">
+    <igx-input-group class="!light-input-group ![--border-color:#7B9E89]" type="border">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -19,7 +19,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!light-input-search-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
+    <igx-input-group class="!light-input-group ![--search-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Search</label>
         <input type="tel" igxInput name="phone" />
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
index 61518e96bb..471cab7e36 100644
--- a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
+++ b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
@@ -1,7 +1,7 @@
 <div class="radio-wrapper">
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
 </div>
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
index 76d2d6cd8f..7476bc84b4 100644
--- a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
+++ b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="select-wrapper">
-  <igx-select class="!light-select-toggle-button-[#99BAA6] ![toggle-button-background-focus:#7B9E89]" [overlaySettings]="customOverlaySettings">
+  <igx-select class="!light-select ![--toggle-button-background:#99BAA6]" [overlaySettings]="customOverlaySettings">
     <label igxLabel>Select An Item</label>
     @for (item of items; track item) {
       <igx-select-item [value]="item">
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
index 883bef239e..1a54d792c9 100644
--- a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
+++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
@@ -1,6 +1,6 @@
 <div class="switch-wrapper">
   @for (setting of settings; track setting) {
-    <igx-switch class="!light-switch-color-[#7B9E89] ![--label-color:#4F6A5A]" [checked]="setting.state">
+    <igx-switch class="!light-switch ![--track-off-color:#7B9E89] ![--track-on-color:#7B9E89]" [checked]="setting.state">
       {{ setting.name }}
     </igx-switch>
   }
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
index e8f53ab515..f3cb199338 100644
--- a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
+++ b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <igx-query-builder class="!light-query-builder-background-[#90B69F] ![--label-foreground:#121E17]" #queryBuilder
+    <igx-query-builder class="!light-query-builder ![--background:#90B69F]" #queryBuilder
         [entities]="entities">
     </igx-query-builder>
 </div>
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
index ef9a6d33ff..7f09201334 100644
--- a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
+++ b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
@@ -1,7 +1,6 @@
 <div class="container">
     <igx-slider
-        class="!light-slider-color-[#7B9E89]
-        ![--track-step-color:#B9375D]"
+        class="!light-slider ![--thumb-color:#7B9E89]"
         [step]="10"
         [maxValue]="100"
         [primaryTicks]="3"
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
index 56465ba8ec..fba78cb2b9 100644
--- a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
+++ b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
@@ -4,7 +4,7 @@
 </igx-avatar>
 
 <div #outlet="overlay-outlet" igxOverlayOutlet>
-    <div class="!light-tooltip-background-[#90B69F] ![--border-radius:6px]" #tooltipRef="tooltip" igxTooltip>
+    <div class="!light-tooltip ![--background:#90B69F]" #tooltipRef="tooltip" igxTooltip>
         Her name is Madelyn James
     </div>
 </div>
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index cefd614e61..bb3c5c3ee1 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-avatar class="!light-avatar-background-[#FF4E00] ![--color:#011627]" initials="DY" shape="rounded"></igx-avatar>
+<igx-avatar class="!light-avatar ![background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
index 24cef5453e..171c4de3d7 100644
--- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
+++ b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
@@ -1,5 +1,5 @@
 <div class="sample-column card-wrapper">
-  <igx-card class="!light-card-background-[#193625] ![--subtitle-text-color:#ECAA53]" elevated>
+  <igx-card class="!light-card ![--background:#193625] ![--subtitle-text-color:#ECAA53]" elevated>
     <igx-card-media height="180px">
       <img [src]="card.imageUrl">
     </igx-card-media>
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
index c0506fffce..95029cb0e2 100644
--- a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
+++ b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="sample-holder">
-    <igx-expansion-panel class="my-expansion-panel !light-expansion-panel-header-background-[#4F6A5A] ![--body-background:#A3C7B2]">
+    <igx-expansion-panel class="my-expansion-panel !light-expansion-panel ![--header-background:#4F6A5A] ![--body-background:#A3C7B2]">
         <igx-expansion-panel-header [iconPosition]="'right'">
             <igx-expansion-panel-title>
                 Golden Retriever
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
index 9f04251f8a..762b097ab1 100644
--- a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
+++ b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-splitter class="!light-splitter-color-[#7B9E89] ![--size:7px]" style='height: 100vh;' [style.width]='"100%"'>
+<igx-splitter class="!light-splitter ![--bar-color:#7B9E89]" style='height: 100vh;' [style.width]='"100%"'>
     <igx-splitter-pane>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim.
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
index 4fb5d199fe..f2f49aed5d 100644
--- a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
+++ b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-stepper class="!light-stepper-step-background-[#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
+<igx-stepper class="!light-stepper ![--step-background:#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
     <ng-template igxStepActiveIndicator>
         <igx-icon>edit</igx-icon>
     </ng-template>
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
index 1f1cc0e6a3..3512c7ab7e 100644
--- a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
+++ b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-bottom-nav class="!light-bottom-nav-background-[#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
+<igx-bottom-nav class="!light-bottom-nav ![--background:#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
   <igx-bottom-nav-item>
     <igx-bottom-nav-header>
       <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
index f0a88bccd4..cf197ad919 100644
--- a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
+++ b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-tabs class="!light-tabs-background-[#769683] ![--item-active-icon-color:#FFD640] ![--item-active-color:#FFD640]">
+<igx-tabs class="!light-tabs ![--item-background:#011627] ![--item-active-icon-color:#FF8040] ![--item-active-color:#FF8040]">
     <igx-tab-item>
         <igx-tab-header>
             <igx-icon igxTabHeaderIcon>library_music</igx-icon>
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
index 78aa3fb339..184c269959 100644
--- a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
+++ b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="control-wrapper">
-    <igx-combo class="!light-combo-toggle-button-[#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
+    <igx-combo class="!light-combo ![--toggle-button-background:#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
         [groupKey]="'weaponRange'" placeholder="Pick up two weapons" searchPlaceholder="Search..."
         [itemsMaxHeight]="255" (selectionChanging)="setWeaponsLimit($event)">
     </igx-combo>
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
index 15adcc3875..21dce1ce43 100644
--- a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
+++ b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="list-sample">
-  <igx-list class="!light-list-background-[#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
+  <igx-list class="!light-list ![--background:#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
     <igx-list-item [isHeader]="true">Contacts</igx-list-item>
     @for (contact of contacts; track contact) {
       <igx-list-item #item>
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
index 47424cfa1d..bb1cdbc600 100644
--- a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
+++ b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
@@ -1,10 +1,10 @@
 <div class="sample-wrapper">
   <igx-tree class="tree-root">
     @for (type of data; track type) {
-      <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
+      <igx-tree-node class="!light-tree ![--background:#81B698]">
         {{ type.Name }}
         @for (value of type.Children; track value) {
-          <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
+          <igx-tree-node class="!light-tree ![--background:#81B698]">
             {{ value.Name }}
           </igx-tree-node>
         }
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
index e5eafe2896..722a40cf66 100644
--- a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
+++ b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
@@ -1,18 +1,18 @@
 <div class="sample-column">
-    <igx-navbar class="!light-navbar-background-[#7B9E89] ![--text-color:#121E17]" title="Sample App">
+    <igx-navbar class="!light-navbar ![--background:#7B9E89] ![--text-color:#121E17]" title="Sample App">
         <igx-navbar-action>
-            <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
                 <igx-icon>menu</igx-icon>
             </button>
         </igx-navbar-action>
 
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>search</igx-icon>
         </button>
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>favorite</igx-icon>
         </button>
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>more_vert</igx-icon>
         </button>
     </igx-navbar>
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
index 001907fa73..8ad5131d22 100644
--- a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
+++ b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
@@ -1,7 +1,7 @@
 <button igxButton="contained" (click)="snackbar.open()">Send message</button>
 <div>
   <igx-snackbar
-  class="!light-snackbar-background-[#7B9E89]
+  class="!light-snackbar ![--background:#7B9E89]
   ![--button-color:#DD0D4B]"
   #snackbar
   [autoHide]="false"
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
index 82f22cb06a..4c97ef4658 100644
--- a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
+++ b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
@@ -7,5 +7,5 @@
         </div>
     </article>
 
-    <igx-toast class="!light-toast-background-[#90B69F] ![--border-radius:6px]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
+    <igx-toast class="!light-toast ![--background:#90B69F]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
 </div>
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
index 42be4593b4..1070ae16b9 100644
--- a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
+++ b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
@@ -1,3 +1,3 @@
 <article class="calendar-wrapper">
-    <igx-calendar class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
+    <igx-calendar class="!light-calendar ![--header-background:#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
 </article>
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
index c11a18d87b..1b4fb25524 100644
--- a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
+++ b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-month-picker class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>
+<igx-month-picker class="!light-calendar ![--header-background:#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>

From 8c2a18ca6734b9b061153d21c3d8a9a84afbfd21 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Wed, 17 Sep 2025 21:05:32 +0300
Subject: [PATCH 05/11] refactor(*): minor fixes and changes

---
 src/app/app.config.ts                                      | 4 ++--
 .../badge-tailwind-styling-sample.component.html           | 2 +-
 src/app/index/index.component.ts                           | 7 ++++---
 .../avatar-tailwind-styling.component.html                 | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index e404533960..91581045b4 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,4 +1,4 @@
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { provideHttpClient, withFetch, withInterceptorsFromDi } from "@angular/common/http";
 import { ApplicationConfig, importProvidersFrom } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule, HammerModule, provideClientHydration, withEventReplay } from "@angular/platform-browser";
@@ -16,7 +16,7 @@ export const AppConfig: ApplicationConfig = {
             HammerModule,
             NgbModule
         ),
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withInterceptorsFromDi(), withFetch()),
         provideAnimations(),
         provideRouter(AppRoutes),
         OverflowService, provideClientHydration(withEventReplay())
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
index 04baf683d6..edceb81ace 100644
--- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
+++ b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
@@ -7,7 +7,7 @@
       <div class="wrapper">
         <div>
           <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![background:#FF4E00] ![--border-radius:4px]"></igx-badge>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![--background-color:#FF4E00] ![--border-radius:4px]"></igx-badge>
         </div>
         <div class="contact-container">
           <span class="contact-name">{{ member.name }}</span>
diff --git a/src/app/index/index.component.ts b/src/app/index/index.component.ts
index dc1e3a4143..5b46c25b2e 100644
--- a/src/app/index/index.component.ts
+++ b/src/app/index/index.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMENT, PLATFORM_ID, inject } from '@angular/core';
 import { NavigationStart, Route, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { IgxNavigationDrawerComponent, IgxTreeComponent, IgxLayoutDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxFlexDirective, IgxNavbarComponent } from 'igniteui-angular';
 import { fromEvent, Subscription } from 'rxjs';
@@ -19,6 +19,7 @@ import { servicesRoutesData } from '../services/services-routes-data';
 import { themingRoutesData } from '../theming/theming-routes-data';
 import { treeGridRoutesData } from '../tree-grid/tree-grid-routes-data';
 import { FormsModule } from '@angular/forms';
+import { isPlatformBrowser } from '@angular/common';
 
 
 
@@ -32,7 +33,7 @@ export class IndexComponent implements OnInit, AfterViewInit {
     private router = inject(Router);
     private cdr = inject(ChangeDetectorRef);
     private document = inject<Document>(DOCUMENT);
-
+    private platformId = inject(PLATFORM_ID);
 
     @ViewChild('navdrawer', { read: IgxNavigationDrawerComponent, static: true })
     public navdrawer: IgxNavigationDrawerComponent;
@@ -168,7 +169,7 @@ export class IndexComponent implements OnInit, AfterViewInit {
         const loadedRouteItem = this.appRoutes.filter(
             (route: any) => route.path === this.router.url)[0];
 
-        if (loadedRouteItem) {
+        if (loadedRouteItem && isPlatformBrowser(this.platformId)) {
             // Get parent (INavItem)
             const loadedParentItem = this.currentNavItems.filter(
                 (navItem) => navItem.name === loadedRouteItem.parentName)[0];
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index bb3c5c3ee1..736311f581 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-avatar class="!light-avatar ![background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>
+<igx-avatar class="!light-avatar ![--background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>

From 0f06fa78d1ffbd40843b33988006b55bf88b46b2 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 26 Sep 2025 18:06:14 +0300
Subject: [PATCH 06/11] feat(cell-merging): adding editing to samples

---
 ...id-cell-merge-custom-sample.component.html |  8 ++++----
 .../grid-cell-merge-sample.component.html     | 12 +++++------
 ...ical-grid-cell-merge-custom.component.html | 20 +++++++++----------
 ...ierarchical-grid-cell-merge.component.html | 20 +++++++++----------
 ...id-cell-merge-custom-sample.component.html | 12 +++++------
 ...tree-grid-cell-merge-sample.component.html | 12 +++++------
 6 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html
index 2826f258db..bbd66c35a5 100644
--- a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html
+++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html
@@ -2,13 +2,13 @@
   <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [mergeStrategy]="perProjectMergeStrategy" [cellMergeMode]="cellMergeMode" >
     <igx-column field="ActionID" header="Order ID" [hidden]="true">
     </igx-column>
-    <igx-column field="ProjectName" header="Project Name" [merge]="true">
+    <igx-column field="ProjectName" header="Project Name" [merge]="true" [editable]="true">
     </igx-column>
-    <igx-column field="Type" header="Type" [merge]="true">
+    <igx-column field="Type" header="Type" [merge]="true" [editable]="true">
     </igx-column>
-    <igx-column field="Priority" header="Priority" [merge]="true">
+    <igx-column field="Priority" header="Priority" [merge]="true" [editable]="true">
     </igx-column>
-    <igx-column field="Status" header="Status" [merge]="true">
+    <igx-column field="Status" header="Status" [merge]="true" [editable]="true">
     </igx-column>
     <igx-column field="ActionName" header="Action">
     </igx-column>
diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html
index 62833d01c7..d5175906ab 100644
--- a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html
+++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html
@@ -2,11 +2,11 @@
   <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [rowSelection]="selectionMode"  [cellMergeMode]="cellMergeMode">
     <igx-column field="OrderID" header="Order ID" [hidden]="true" >
     </igx-column>
-    <igx-column field="ShipperName" header="Shipper Name" width="250px" [merge]="true" sortable="true">
+    <igx-column field="ShipperName" header="Shipper Name" width="250px" [merge]="true" [editable]="true" sortable="true">
     </igx-column>
-    <igx-column field="Salesperson" header="Salesperson" width="250px" [merge]="true" sortable="true">
+    <igx-column field="Salesperson" header="Salesperson" width="250px" [merge]="true" [editable]="true" sortable="true">
     </igx-column>
-    <igx-column field="Discontinued" header="Discontinued" width="200px" [merge]="true" sortable="true">
+    <igx-column field="Discontinued" header="Discontinued" width="200px" [merge]="true" [editable]="true" sortable="true">
       <ng-template igxCell let-cell="cell" let-val>
         @if (val) {
           <img src="assets/images/grid/active.png" title="Continued" alt="Continued" />
@@ -18,11 +18,11 @@
     </igx-column>
     <igx-column field="UnitPrice" header="Unit Price" width="150px" [formatter]="formatCurrency" dataType="number">
     </igx-column>
-    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number">
+    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number" [editable]="true">
     </igx-column>
-    <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true">
+    <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true" [editable]="true">
     </igx-column>
-    <igx-column field="ShipCity" header="Ship City" width="250px" [merge]="true">
+    <igx-column field="ShipCity" header="Ship City" width="250px" [merge]="true" [editable]="true">
     </igx-column>
     <igx-column field="ShipName" header="Ship Name" width="250px">
     </igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.html b/src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.html
index ee92401348..d52c8be0c3 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.html
@@ -1,22 +1,22 @@
 <div class="grid__wrapper">
     <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="localData" [moving]="true" [sortingExpressions]="sortExpr"
         [cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy" [height]="'740px'" [width]="'100%'" [allowFiltering]="true" >
-        <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
-        <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="CompanyName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="ContactName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
+        <igx-column field="Address" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
         <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
         <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
         <igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
         <igx-row-island [height]="null" [key]="'ChildCompanies'" [moving]="true" [autoGenerate]="false"
             [sortingExpressions]="sortExpr" [cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy">
-            <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="CompanyName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+            <igx-column field="ContactName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+            <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
             <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
             <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
             <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
             <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html
index bdbc7acb34..1c2a3dd915 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html
@@ -19,22 +19,22 @@
                 }
             </igx-select>
         </igx-grid-toolbar>
-        <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
-        <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="CompanyName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="ContactName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
+        <igx-column field="Address" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+        <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
         <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
-        <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
         <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
         <igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
         <igx-row-island [height]="null" [key]="'ChildCompanies'" [moving]="true" [autoGenerate]="false"
             [sortingExpressions]="sortExpr" [cellMergeMode]="cellMergeModeRowIsland">
-            <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="CompanyName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+            <igx-column field="ContactName" [sortable]="true" [resizable]="true" [editable]="true"></igx-column>
+            <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
             <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
-            <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true" [editable]="true"></igx-column>
             <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
             <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
             <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-cell-merge-custom-sample/tree-grid-cell-merge-custom-sample.component.html b/src/app/tree-grid/tree-grid-cell-merge-custom-sample/tree-grid-cell-merge-custom-sample.component.html
index d74ec34ca1..cb0682f82f 100644
--- a/src/app/tree-grid/tree-grid-cell-merge-custom-sample/tree-grid-cell-merge-custom-sample.component.html
+++ b/src/app/tree-grid/tree-grid-cell-merge-custom-sample/tree-grid-cell-merge-custom-sample.component.html
@@ -2,13 +2,13 @@
     <igx-tree-grid #treeGrid [igxPreventDocumentScroll]="true" [data]="data" width="100%" height="800px"
         [sortingExpressions]="sortExpr" [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID"
         [cellMergeMode]="cellMergeMode" [mergeStrategy]="mergeStrategy">
-        <igx-column [field]="'Name'" dataType="string" width="250px"></igx-column>
-        <igx-column [field]="'Title'" dataType="string" width="250px" [merge]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'Name'" dataType="string" width="250px" [editable]="true"></igx-column>
+        <igx-column [field]="'Title'" dataType="string" width="250px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
         <igx-column [field]="'HireDate'" dataType="date" width="200px"></igx-column>
-        <igx-column [field]="'Country'" dataType="string" width="200px" [merge]="true" [sortable]="true"></igx-column>
-        <igx-column [field]="'City'" dataType="string" width="200px" [merge]="true" [sortable]="true"></igx-column>
-        <igx-column [field]="'Age'" dataType="number" width="200px"></igx-column>
-        <igx-column [field]="'Address'" dataType="string" width="200px"></igx-column>
+        <igx-column [field]="'Country'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'City'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'Age'" dataType="number" width="200px" [editable]="true"></igx-column>
+        <igx-column [field]="'Address'" dataType="string" width="200px" [editable]="true"></igx-column>
         <igx-column [field]="'Fax'" dataType="string" width="200px"></igx-column>
         <igx-column [field]="'PostalCode'" dataType="string" width="200px"></igx-column>
         <igx-column [field]="'Phone'" dataType="string" width="200px"></igx-column>
diff --git a/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html
index 8acfe7060e..2d8fdfb58f 100644
--- a/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html
+++ b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html
@@ -21,13 +21,13 @@
                 }
             </igx-select>
         </igx-grid-toolbar>
-        <igx-column [field]="'Name'" dataType="string" width="250px"></igx-column>
-        <igx-column [field]="'Title'" dataType="string" width="250px" [merge]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'Name'" dataType="string" width="250px" [editable]="true"></igx-column>
+        <igx-column [field]="'Title'" dataType="string" width="250px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
         <igx-column [field]="'HireDate'" dataType="date" width="200px"></igx-column>
-        <igx-column [field]="'Country'" dataType="string" width="200px" [merge]="true" [sortable]="true"></igx-column>
-        <igx-column [field]="'City'" dataType="string" width="200px" [merge]="true" [sortable]="true"></igx-column>
-        <igx-column [field]="'Age'" dataType="number" width="200px"></igx-column>
-        <igx-column [field]="'Address'" dataType="string" width="200px"></igx-column>
+        <igx-column [field]="'Country'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'City'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
+        <igx-column [field]="'Age'" dataType="number" width="200px" [editable]="true"></igx-column>
+        <igx-column [field]="'Address'" dataType="string" width="200px" [editable]="true"></igx-column>
         <igx-column [field]="'Fax'" dataType="string" width="200px"></igx-column>
         <igx-column [field]="'PostalCode'" dataType="string" width="200px"></igx-column>
         <igx-column [field]="'Phone'" dataType="string" width="200px"></igx-column>

From 267612b0ccc0748a15daee85f04c59399188a98c Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Tue, 30 Sep 2025 15:28:47 +0300
Subject: [PATCH 07/11] fix(live-editing): upping live-editing version to fix
 issue with tailwind dep

---
 package-lock.json | 9 ++++-----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8d4e42ae24..1f0e81258b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,7 @@
         "igniteui-angular-extras": "^20.0.0",
         "igniteui-angular-i18n": "^20.1.0",
         "igniteui-dockmanager": "^1.17.0",
-        "igniteui-live-editing": "^3.1.0",
+        "igniteui-live-editing": "^3.1.1",
         "igniteui-webcomponents": "^6.2.0",
         "minireset.css": "0.0.6",
         "postcss": "^8.5.5",
@@ -12657,9 +12657,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/igniteui-live-editing": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.0.tgz",
-      "integrity": "sha512-h57W9kLCqUau9269rsbD4sR1d8oJo74G5fmvbzRceK8NI40nzZVTHMIu4MMXv9IOj6G89nJZmL6JZlFG55oCDg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.1.tgz",
+      "integrity": "sha512-WyoNlXS5yazjfhRcv01HnvRIiTrCMHMmQ/Ko3eNDSijsZPQLtjckb9vcj6jDeowNyG+GT4d8hE/S6hEoYXTpUg==",
       "license": "MIT"
     },
     "node_modules/igniteui-theming": {
@@ -18669,7 +18669,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
diff --git a/package.json b/package.json
index 938ee3990c..a657afa7c0 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "igniteui-angular-extras": "^20.0.0",
     "igniteui-angular-i18n": "^20.1.0",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-live-editing": "^3.1.0",
+    "igniteui-live-editing": "^3.1.1",
     "igniteui-webcomponents": "^6.2.0",
     "minireset.css": "0.0.6",
     "postcss": "^8.5.5",

From f100648e3b80ec18511ce53e164078f1b8e68c16 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Fri, 3 Oct 2025 18:23:48 +0300
Subject: [PATCH 08/11] feat(tooltip): add placement and advanced sample

---
 .../configs/TooltipConfigGenerator.ts         |  14 +
 .../interactions/interactions-routes-data.ts  |   2 +
 src/app/interactions/interactions.routes.ts   |  12 +
 .../tooltip/tooltip-advanced/IncomeTaxes.ts   |  38 ++
 .../tooltip-advanced.component.html           | 200 +++++++++
 .../tooltip-advanced.component.scss           | 408 ++++++++++++++++++
 .../tooltip-advanced.component.ts             |  74 ++++
 .../tooltip-placement.component.html          |  15 +
 .../tooltip-placement.component.scss          |  10 +
 .../tooltip-placement.component.ts            | 116 +++++
 10 files changed, 889 insertions(+)
 create mode 100644 src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts
 create mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html
 create mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss
 create mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts
 create mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
 create mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
 create mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts

diff --git a/live-editing/configs/TooltipConfigGenerator.ts b/live-editing/configs/TooltipConfigGenerator.ts
index 4ce021503c..d7147d3ac9 100644
--- a/live-editing/configs/TooltipConfigGenerator.ts
+++ b/live-editing/configs/TooltipConfigGenerator.ts
@@ -24,6 +24,20 @@ export class TooltipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
+        // Placement Tooltip Sample
+        configs.push(new Config({
+            component: 'TooltipPlacementComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
+        // Advanced Tooltip Sample
+        configs.push(new Config({
+            component: 'TooltipAdvancedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
         // Style Tooltip Sample
         configs.push(new Config({
             component: 'TooltipStyleComponent',
diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts
index d05119724d..58acfe9992 100644
--- a/src/app/interactions/interactions-routes-data.ts
+++ b/src/app/interactions/interactions-routes-data.ts
@@ -32,6 +32,8 @@ export const interactionsRoutesData = {
     'toggle-sample-4': { displayName: 'Offset Toggle', parentName: 'Toggle' },
     'tooltip-simple': { displayName: 'Simple Tooltip', parentName: 'Tooltip' },
     'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
+    'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
+    'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
     'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
     'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },
     'overlay-sample-main-2': { displayName: 'Overlay Main Sample 2', parentName: 'Overlay' },
diff --git a/src/app/interactions/interactions.routes.ts b/src/app/interactions/interactions.routes.ts
index d580ff3d8f..9f80e5657e 100644
--- a/src/app/interactions/interactions.routes.ts
+++ b/src/app/interactions/interactions.routes.ts
@@ -60,6 +60,8 @@ import { ToggleComponent } from './toggle/toggle.component';
 import { TooltipRichComponent } from './tooltip/tooltip-rich/tooltip-rich.component';
 import { TooltipSimpleComponent } from './tooltip/tooltip-simple/tooltip-simple.component';
 import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.component';
+import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
+import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
 
 export const InteractionsRoutes: Routes = [
     {
@@ -207,6 +209,16 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['tooltip-rich'],
         path: 'tooltip-rich'
     },
+    {
+        component: TooltipPlacementComponent,
+        data: interactionsRoutesData['tooltip-placement'],
+        path: 'tooltip-placement'
+    },
+    {
+        component: TooltipAdvancedComponent,
+        data: interactionsRoutesData['tooltip-advanced'],
+        path: 'tooltip-advanced'
+    },
     {
         component: TooltipStyleComponent,
         data: interactionsRoutesData['tooltip-style'],
diff --git a/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts b/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts
new file mode 100644
index 0000000000..9b176cd511
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts
@@ -0,0 +1,38 @@
+export class IncomeTaxesItem {
+    public constructor(init: Partial<IncomeTaxesItem>) {
+        Object.assign(this, init);
+    }
+    public year: string;
+    public revenue: number;
+}
+export class IncomeTaxes extends Array<IncomeTaxesItem> {
+    public constructor(items: IncomeTaxesItem[] | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new IncomeTaxesItem({
+                    year: `2021`,
+                    revenue: 15
+                }),
+                new IncomeTaxesItem({
+                    year: `2022`,
+                    revenue: 30
+                }),
+                new IncomeTaxesItem({
+                    year: `2023`,
+                    revenue: 18
+                }),
+                new IncomeTaxesItem({
+                    year: `2024`,
+                    revenue: 30
+                }),
+                new IncomeTaxesItem({
+                    year: `2025`,
+                    revenue: 38
+                })
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}
diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html
new file mode 100644
index 0000000000..0cbaa25114
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html
@@ -0,0 +1,200 @@
+<div class="container" #outlet="overlay-outlet" igxOverlayOutlet>
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Containing list</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger1" [hideDelay]="0" [showDelay]="0">
+            <igx-list-item>
+                <p igxListLineTitle>Credits</p>
+                <span igxListAction>($2.4T)</span>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="list" #trigger1="tooltip" igxTooltip>
+        <igx-list>
+            <h6>Credits</h6>
+            <igx-list-item>
+                <igx-icon name="dollar"></igx-icon>Amount - 1,678,345
+            </igx-list-item>
+            <div class="toolsWrapper">
+                <igx-list-item [isHeader]="true">Tools</igx-list-item>
+                <igx-list-item>
+                    <igx-icon name="filter"></igx-icon>Filter
+                </igx-list-item>
+                <igx-list-item>
+                    <igx-icon name="link"></igx-icon>Retail Banking
+                </igx-list-item>
+                <igx-list-item>
+                    <igx-icon name="info"></igx-icon>More Info
+                </igx-list-item>
+            </div>
+        </igx-list>
+    </div>
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Containing chart</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger2" [hideDelay]="0" [showDelay]="0">
+            <igx-list-item>
+                <p igxListLineTitle>Individual Income Taxes</p>
+                <span>($2.4T)</span>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="chart" #trigger2="tooltip" igxTooltip>
+        <h6>Individual Income Taxes</h6>
+        <igx-category-chart
+            [dataSource]="incomeTaxesData"
+            [chartType]="'SplineArea'"
+            [includedProperties]="['year', 'revenue']"
+            [yAxisTitle]="'IFT'"
+            [yAxisTitleLeftMargin]="10"
+            [yAxisTitleRightMargin]="5"
+            [yAxisLabelLeftMargin]="0"
+            [markerTypes]="'none'"
+            [toolTipType]="'none'"
+            [isHorizontalZoomEnabled]="false"
+            [isVerticalZoomEnabled]="false"
+        >
+        </igx-category-chart>
+        <p class="content">
+            In fiscal year (FY) 2024, the largest source of federal revenue was
+            Individual Income Taxes (49.3% of total revenue). So far in fiscal
+            year 2025, the largest source of federal revenue is Individual
+            Income Taxes (50.6% of total revenue).
+        </p>
+    </div>
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Containing badge</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger3" [hideDelay]="0" [showDelay]="0">
+            <igx-list-item>
+                <div class="avatarWrapper" igxListThumbnail>
+                    <igx-avatar
+                        id="avatar"
+                        src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
+                        shape="circle"
+                    >
+                    </igx-avatar>
+                    <igx-badge>
+                        <igx-icon name="block"></igx-icon>
+                    </igx-badge>
+                </div>
+                <p igxListLineTitle>Eliza Morales</p>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="employee" #trigger3="tooltip" igxTooltip>
+        <div class="avatarWrapper">
+            <igx-avatar
+                id="avatar"
+                src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
+                shape="circle"
+            >
+            </igx-avatar>
+            <igx-badge>
+                <igx-icon name="block"></igx-icon>
+            </igx-badge>
+        </div>
+        <div class="textWrapper">
+            <h6>Eliza Morales</h6>
+            <p class="occupation">Software Engineer</p>
+            <p class="status">In a meeting</p>
+            <p class="availability">Available at 2:00 pm</p>
+        </div>
+    </div>
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Containing icon</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger4" [hideDelay]="0" [showDelay]="0" [hasArrow]="true" [igxToggleOutlet]="outlet">
+            <igx-list-item>
+                <div class="avatarWrapper" igxListThumbnail>
+                    <igx-avatar
+                        id="avatar"
+                        src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/5.jpg"
+                        shape="circle"
+                    >
+                    </igx-avatar>
+                    <igx-badge>
+                        <igx-icon name="block"></igx-icon>
+                    </igx-badge>
+                </div>
+                <p igxListLineTitle>Aron Watson</p>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="multiline" #trigger4="tooltip" igxTooltip>
+        <igx-icon name="block"></igx-icon>
+        <p>
+            Notifications are silenced while I focus. Please reach out only for
+            urgent matters.
+        </p>
+    </div>
+
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Containing buttons</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger5" [hideDelay]="0" [showDelay]="0">
+            <igx-list-item>
+                <div class="headingWrapper" igxListLineTitle>
+                    <igx-icon name="btc"></igx-icon>
+                    <h6 class="heading">BTC</h6>
+                </div>
+                <p igxListAction class="secondary">Daily: + $45</p>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="btcBtn" #trigger5="tooltip" igxTooltip>
+        <igx-card class="contentWrapper">
+            <div class="titleWrapper">
+                <h6>BTC</h6>
+                <igx-icon name="btc"></igx-icon>
+            </div>
+            <div class="exchangeWrapper">
+                <p class="detail">Exchange Balance</p>
+                <p class="subtitle">USD 356.12.45</p>
+            </div>
+            <div class="assetsWrapper">
+                <p class="detail">Assets Balance</p>
+                <p class="subtitle">USD 46.28.79</p>
+            </div>
+        </igx-card>
+        <div class="footerWrapper">
+            <button igxButton="flat">Deposit</button>
+            <button igxButton="flat">Withdraw</button>
+        </div>
+    </div>
+    <igx-card class="triggerWrapper">
+        <igx-card-header>
+            <h3 igxCardHeaderTitle>Advanced sticky tooltip</h3>
+        </igx-card-header>
+        <igx-list class="trigger" [igxTooltipTarget]="trigger6" [sticky]="true" [hideDelay]="0" [showDelay]="0">
+            <igx-list-item>
+                <div class="headingWrapper" igxListLineTitle>
+                    <igx-icon name="btc"></igx-icon>
+                    <h6 class="heading">BTC</h6>
+                </div>
+                <p igxListAction class="secondary">Daily: + 2,6%</p>
+            </igx-list-item>
+        </igx-list>
+    </igx-card>
+    <div class="btc" #trigger6="tooltip" igxTooltip>
+        <igx-card class="contentWrapper">
+            <div class="titleWrapper">
+                <h6>BTC</h6>
+                <igx-icon name="btc"></igx-icon>
+            </div>
+            <div class="exchangeWrapper">
+                <p class="detail">Exchange Balance</p>
+                <p class="subtitle">USD 356.12.45</p>
+            </div>
+            <div class="assetsWrapper">
+                <p class="detail">Assets Balance</p>
+                <p class="subtitle">USD 46.28.79</p>
+            </div>
+        </igx-card>
+    </div>
+</div>
diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss
new file mode 100644
index 0000000000..d0e91354d6
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss
@@ -0,0 +1,408 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: max-content;
+    max-width: 680px;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+p {
+    margin: unset;
+}
+
+.igx-tooltip {
+    color: var(--ig-primary-300-contrast);
+    background-color: var(--ig-surface-50);
+    border: 1px solid var(--ig-gray-300);
+    box-shadow: var(--ig-elevation-1);
+    max-width: unset;
+}
+
+.triggerWrapper {
+    border: 1px solid var(--ig-gray-200);
+    border-radius: 0.25rem;
+    background-color: #f5f5f5;
+
+    h3 {
+        color: #000
+    }
+
+    .trigger {
+        border: 1px solid var(--ig-gray-300);
+        width: 280px;
+        height: max-content;
+        margin: 0px 1rem 1rem;
+
+        span {
+            display: block;
+            font-size: 0.8125rem;
+            line-height: 1.375rem;
+            letter-spacing: 0.3px;
+            color: var(--ig-gray-600);
+            text-decoration: underline;
+        }
+
+        .headingWrapper {
+            display: flex;
+            align-items: center;
+
+            igx-icon {
+                --size: 1.25rem
+            }
+
+            h6 {
+                font-size: var(--ig-h6-font-size);
+                font-weight: var(--ig-h6-font-weight);
+                line-height: var(--ig-h6-line-height);
+                letter-spacing: var(--ig-h6-letter-spacing);
+                margin: unset;
+                padding-left: 0.5rem;
+                color: var(--ig-gray-900);
+            }
+        }
+
+        .secondary {
+            color: var(--ig-success-500);
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            letter-spacing: 0.25px;
+        }
+
+        igx-avatar {
+            --size: 2.5rem;
+        }
+    }
+}
+
+.trigger:nth-of-type(6) {
+    cursor: pointer;
+}
+
+.trigger:nth-of-type(n+5) {
+    margin-left: 1.5rem;
+}
+
+.list.igx-tooltip {
+    padding: unset;
+}
+
+.list {
+
+    igx-list {
+        width: 300px;
+        padding: 1rem;
+        gap: 1rem;
+        letter-spacing: 0.15px;
+        border-radius: 0.25rem;
+
+        h6 {
+            font-size: var(--ig-h6-font-size);
+            font-weight: var(--ig-h6-font-weight);
+            line-height: var(--ig-h6-line-height);
+            margin: unset;
+        }
+
+        igx-list-item {
+
+            &:not(.igx-list__header) {
+                --item-text-color: var(--ig-gray-900);
+                cursor: pointer;
+                font-size: 1rem;
+                line-height: 1.5rem;
+                font-weight: 400;
+                letter-spacing: 0.15px;
+            }
+        }
+
+        igx-icon {
+            --size: 0.938rem;
+            --ig-icon-color: var(--ig-gray-700);
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 1rem;
+        }
+    }
+}
+
+.chart.igx-tooltip {
+    border-radius: 0.5rem;
+    padding: 1rem;
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.chart {
+
+    h6 {
+        font-size: var(--ig-h6-font-size);
+        font-weight: var(--ig-h6-font-weight);
+        letter-spacing: var(--ig-h6-letter-spacing);
+        line-height: var(--ig-h6-line-height);
+        margin: unset;
+    }
+
+    igx-category-chart {
+        width: 317px;
+        height: 178px;
+        border: 1px solid #E0E0E0;
+        border-radius: 0.375rem;
+    }
+
+    .content {
+        font-size: 0.813rem;
+        font-weight: 400;
+        line-height: 1.125rem;
+        letter-spacing: 0.3px;
+        color: var(--ig-gray-700);
+        width: 317px;
+    }
+
+    p {
+        margin: unset;
+    }
+}
+
+.employee.igx-tooltip {
+    border-radius: 0.5rem;
+    padding: 1rem;
+    gap: 1rem;
+}
+
+.employee {
+
+    igx-avatar {
+        --size: 5.5rem
+    }
+
+    .textWrapper {
+        width: 159px;
+
+        p {
+            margin: unset;
+        }
+
+        h6 {
+            font-size: var(--ig-h6-font-size);
+            font-weight: var(--ig-h6-font-weight);
+            line-height: var(--ig-h6-line-height);
+            letter-spacing: var(--ig-h6-letter-spacing);
+            margin: unset;
+        }
+
+        p:not(.title) {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            font-weight: 400;
+            letter-spacing: 0.25px;
+            color: var(--ig-gray-700);
+        }
+    }
+}
+
+.avatarWrapper {
+    line-height: 0;
+    position: relative;
+
+    igx-badge {
+        --background-color: var(--ig-error-500);
+        --_badge-size: 1.25rem;
+        box-shadow: var(--ig-elevation-1);
+        position: absolute;
+        bottom: -3px;
+        right: -3px;
+    }
+}
+
+.multiline.igx-tooltip {
+    border-radius: 0.125rem;
+    gap: 0.5rem;
+    background-color: var(--ig-error-50);
+	border: unset;
+    padding: 0.188rem 0.5rem;
+}
+
+:host ::ng-deep {
+    .multiline .igx-tooltip--bottom {
+        border-bottom-color: var(--ig-error-50);
+    }
+}
+
+.multiline {
+    igx-icon {
+        color: var(--ig-error-500);
+        --size: 0.938rem;
+        width: 1.125rem;
+        height: 1.125rem;
+    }
+
+    p {
+        font-size: 0.625rem;
+        width: 158px;
+        line-height: 1rem;
+        letter-spacing: 0.33px;
+        margin: unset;
+    }
+}
+
+.btcBtn.igx-tooltip {
+    border-radius: 0.25rem;
+    padding: 1rem 1rem 0.5rem 1rem;
+    gap: 0.5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.btcBtn {
+
+    igx-card {
+        background-color: var(--ig-gray-50);
+        padding: 0.5rem;
+        border-radius: 0.125rem;
+        letter-spacing: 0.15px;
+        width: 268px;
+        border: none;
+
+        .titleWrapper {
+            display: flex;
+            width: 4.25rem;
+            justify-content: space-between;
+
+            h6 {
+                font-size: var(--ig-h6-font-size);
+                font-weight: var(--ig-h6-font-weight);
+                line-height: var(--ig-h6-line-height);
+                margin: unset;
+            }
+
+            igx-icon {
+                --size: 1.25rem;
+                width: 1.5rem;
+            }
+        }
+
+        .detail {
+            font-size: 0.75rem;
+            font-weight: 600;
+            line-height: 1rem;
+            margin-bottom: unset;
+        }
+
+        .subtitle {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            margin-top: unset;
+            margin-bottom: 1rem;
+            color: var(--ig-gray-900);
+        }
+
+        .exchangeWrapper {
+
+            .detail {
+                color: var(--ig-secondary-300);
+                margin: 1rem 0 0.125rem 0;
+            }
+        }
+
+        .assetsWrapper {
+
+            .detail {
+                color: var(--ig-primary-300);
+                margin: 0 0 0.125rem 0;
+            }
+
+            .subtitle {
+                margin-bottom: unset;
+            }
+        }
+    }
+
+    .footerWrapper {
+        width: 100%;
+        gap: 0.313rem;
+        display: flex;
+        justify-content: flex-end;
+
+        igx-button {
+            font-size: 0.875rem;
+            line-height: 1rem;
+            letter-spacing: 0.75px;
+        }
+    }
+}
+
+.btc.igx-tooltip {
+    border-radius: 0.25rem;
+    padding: 1rem;
+    gap: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    width: 280px;
+    --ig-icon-color: var(--ig-gray-700);
+}
+
+.btc {
+
+    igx-card {
+        padding: 0.5rem;
+        letter-spacing: 0.15px;
+        border: none;
+
+        .titleWrapper {
+            display: flex;
+            width: 4.25rem;
+            justify-content: space-between;
+
+            h6 {
+                font-size: var(--ig-h6-font-size);
+                font-weight: var(--ig-h6-font-weight);
+                line-height: var(--ig-h6-line-height);
+                margin: unset;
+            }
+
+            igx-icon {
+                --size: 1.25rem;
+                width: 1.5rem;
+            }
+        }
+
+        .detail {
+            font-size: 0.75rem;
+            font-weight: 600;
+            line-height: 1rem;
+            margin-bottom: unset;
+        }
+
+        .subtitle {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            margin-top: unset;
+            color: var(--ig-gray-900);
+        }
+
+        .exchangeWrapper {
+
+            .detail {
+                color: var(--ig-secondary-300);
+                margin: 0.5rem 0 0.125rem 0;
+            }
+
+            .subtitle {
+                margin-bottom: 0.5rem;
+            }
+        }
+
+        .assetsWrapper {
+
+            .detail {
+                color: var(--ig-primary-300);
+                margin: 0 0 0.125rem 0;
+            }
+
+            .subtitle {
+                margin-bottom: unset;
+            }
+        }
+    }
+}
diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts
new file mode 100644
index 0000000000..61d2046b26
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts
@@ -0,0 +1,74 @@
+import { Component, inject } from "@angular/core";
+import {
+    IgxTooltipTargetDirective,
+    IgxTooltipDirective,
+    IgxButtonDirective,
+    IgxListComponent,
+    IgxListItemComponent,
+    IgxAvatarComponent,
+    IgxIconComponent,
+    IgxBadgeComponent,
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardHeaderTitleDirective,
+    IgxListThumbnailDirective,
+    IgxListActionDirective,
+    IgxListLineTitleDirective,
+    IgxIconService,
+    IgxOverlayOutletDirective
+} from "igniteui-angular";
+import { IgxCategoryChartModule } from "igniteui-angular-charts";
+import { IncomeTaxes } from "./IncomeTaxes";
+
+@Component({
+    selector: "app-tooltip-advanced",
+    styleUrls: ["./tooltip-advanced.component.scss"],
+    templateUrl: "./tooltip-advanced.component.html",
+    imports: [
+        IgxOverlayOutletDirective,
+        IgxTooltipTargetDirective,
+        IgxTooltipDirective,
+        IgxListComponent,
+        IgxListItemComponent,
+        IgxListActionDirective,
+        IgxListLineTitleDirective,
+        IgxListThumbnailDirective,
+        IgxAvatarComponent,
+        IgxIconComponent,
+        IgxBadgeComponent,
+        IgxButtonDirective,
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCategoryChartModule
+    ]
+})
+export class TooltipAdvancedComponent {
+    private iconService = inject(IgxIconService);
+
+    private dollarIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M444-200h70v-50q50-9 86-39t36-89q0-42-24-77t-96-61q-60-20-83-35t-23-41q0-26 18.5-41t53.5-15q32 0 50 15.5t26 38.5l64-26q-11-35-40.5-61T516-710v-50h-70v50q-50 11-78 44t-28 74q0 47 27.5 76t86.5 50q63 23 87.5 41t24.5 47q0 33-23.5 48.5T486-314q-33 0-58.5-20.5T390-396l-66 26q14 48 43.5 77.5T444-252v52Zm36 120q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>';
+    private filterIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"/></svg>';
+    private linkIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/></svg>';
+    private infoIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>';
+    private blockIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>';
+    private btcIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.339 11.5126C12.339 12.9126 9.93898 12.7486 9.17798 12.7476L9.18298 10.2676C9.94498 10.2686 12.34 10.0526 12.339 11.5126ZM11.82 8.01263C11.82 6.68463 9.82001 6.88363 9.18701 6.88363V9.13263C9.81901 9.13263 11.817 9.28463 11.82 8.01163V8.01263ZM20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10ZM12.952 9.406C13.6673 9.0676 14.0651 8.29005 13.921 7.512C13.8 6.177 12.644 5.728 11.189 5.6V3.749H10.062V5.549C9.762 5.549 9.462 5.549 9.162 5.559V3.745H8.036V5.595C7.792 5.6 7.553 5.604 7.319 5.604V5.6H5.765V6.8C5.765 6.8 6.597 6.785 6.584 6.8C6.89841 6.76025 7.18651 6.98023 7.231 7.294L7.223 12.365C7.20855 12.5849 7.01895 12.7517 6.799 12.738C6.813 12.751 5.98 12.738 5.98 12.738L5.754 14.083C6.308 14.083 7.488 14.083 8.025 14.093V15.966H9.15V14.113C9.459 14.12 9.758 14.123 10.05 14.123V15.967H11.177V14.098C13.072 13.992 14.398 13.517 14.565 11.739C14.6866 11.213 14.581 10.6602 14.274 10.2161C13.967 9.77207 13.487 9.47797 12.952 9.406Z" fill="#DF1B74"/></svg>';
+
+    private incomeTaxes: IncomeTaxes = null;
+
+    constructor() {
+        this.iconService.addSvgIconFromText('dollar', this.dollarIcon);
+        this.iconService.addSvgIconFromText('filter', this.filterIcon);
+        this.iconService.addSvgIconFromText('link', this.linkIcon);
+        this.iconService.addSvgIconFromText('info', this.infoIcon);
+        this.iconService.addSvgIconFromText('block', this.blockIcon);
+        this.iconService.addSvgIconFromText('btc', this.btcIcon);
+    }
+
+    public get incomeTaxesData(): IncomeTaxes {
+        if (this.incomeTaxes === null)
+        {
+            this.incomeTaxes = new IncomeTaxes();
+        }
+        return this.incomeTaxes;
+    }
+}
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
new file mode 100644
index 0000000000..cf0b06579e
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
@@ -0,0 +1,15 @@
+<div class="container">
+    @for (position of positions; track position) {
+    <div igxTooltip>
+        {{ position }}
+    </div>
+    }
+
+    <button
+        class="tooltip-position"
+        igxButton="outlined"
+        (click)="showPositions()"
+    >
+        Click to trigger all supported positions
+    </button>
+</div>
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
new file mode 100644
index 0000000000..097b45cd18
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
@@ -0,0 +1,10 @@
+.container {
+    padding: 0.5rem;
+}
+
+.tooltip-position {
+    margin: 40px 0 0 120px;
+    width: 400px;
+    height: 120px;
+    border-radius: 0.5rem;
+}
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts
new file mode 100644
index 0000000000..81eca2c332
--- /dev/null
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts
@@ -0,0 +1,116 @@
+import { Component, QueryList, ViewChild, ViewChildren } from "@angular/core";
+import {
+    IgxTooltipDirective,
+    IgxButtonDirective,
+    HorizontalAlignment,
+    VerticalAlignment,
+    PositionSettings,
+    OverlaySettings,
+    TooltipPositionStrategy
+} from "igniteui-angular";
+
+@Component({
+    selector: "app-tooltip-placement",
+    styleUrls: ["./tooltip-placement.component.scss"],
+    templateUrl: "./tooltip-placement.component.html",
+    imports: [IgxButtonDirective, IgxTooltipDirective]
+})
+export class TooltipPlacementComponent {
+    @ViewChildren(IgxTooltipDirective)
+    public tooltips!: QueryList<IgxTooltipDirective>;
+
+    @ViewChild(IgxButtonDirective, { static: true })
+    public button!: IgxButtonDirective;
+
+    public positions = Array.from(PositionsMap.keys());
+
+    public showPositions() {
+        this.tooltips.forEach((tooltip, index) => {
+            const position = PositionsMap.get(this.positions[index]);
+            const overlaySettings: OverlaySettings = {
+                target: this.button.nativeElement,
+                positionStrategy: new TooltipPositionStrategy(position),
+                modal: false,
+                closeOnOutsideClick: false,
+                closeOnEscape: true,
+                excludeFromOutsideClick: [this.button.nativeElement]
+            };
+            tooltip.open(overlaySettings);
+        });
+    }
+}
+
+export const PositionsMap = new Map<string, PositionSettings>([
+    ['top', {
+        horizontalDirection: HorizontalAlignment.Center,
+        horizontalStartPoint: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Top,
+        verticalStartPoint: VerticalAlignment.Top
+    }],
+    ['top-start', {
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Top,
+        verticalStartPoint: VerticalAlignment.Top
+    }],
+    ['top-end', {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Top,
+        verticalStartPoint: VerticalAlignment.Top
+    }],
+    ['bottom', {
+        horizontalDirection: HorizontalAlignment.Center,
+        horizontalStartPoint: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Bottom
+    }],
+    ['bottom-start', {
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Bottom
+    }],
+    ['bottom-end', {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Bottom
+    }],
+    ['right', {
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Middle,
+        verticalStartPoint: VerticalAlignment.Middle
+    }],
+    ['right-start', {
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Top
+    }],
+    ['right-end', {
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Top,
+        verticalStartPoint: VerticalAlignment.Bottom
+    }],
+    ['left', {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        verticalStartPoint: VerticalAlignment.Middle
+    }],
+    ['left-start', {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Top
+    }],
+    ['left-end', {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Top,
+        verticalStartPoint: VerticalAlignment.Bottom
+    }]
+]);

From c11ec73c545ca2461829f520dc81b8c3487c4067 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@infragistics.com>
Date: Wed, 8 Oct 2025 18:41:37 +0300
Subject: [PATCH 09/11] fix(pipelines): update Node version to 22.x

---
 azure-devops/app-cd.yml                         | 4 ++--
 azure-devops/{app-crm-cd-yml => app-crm-cd.yml} | 4 ++--
 azure-devops/app-lob-cd.yml                     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename azure-devops/{app-crm-cd-yml => app-crm-cd.yml} (98%)

diff --git a/azure-devops/app-cd.yml b/azure-devops/app-cd.yml
index 85be0d5e78..d10bb53803 100644
--- a/azure-devops/app-cd.yml
+++ b/azure-devops/app-cd.yml
@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'
diff --git a/azure-devops/app-crm-cd-yml b/azure-devops/app-crm-cd.yml
similarity index 98%
rename from azure-devops/app-crm-cd-yml
rename to azure-devops/app-crm-cd.yml
index 094a21e5bc..6719d3c19e 100644
--- a/azure-devops/app-crm-cd-yml
+++ b/azure-devops/app-crm-cd.yml
@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'
diff --git a/azure-devops/app-lob-cd.yml b/azure-devops/app-lob-cd.yml
index ff3c7ac4fc..3dddb75636 100644
--- a/azure-devops/app-lob-cd.yml
+++ b/azure-devops/app-lob-cd.yml
@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'

From 2a7e6b5637a3655aaa996ecbc825b897fbc8a3a6 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Fri, 10 Oct 2025 16:54:56 +0300
Subject: [PATCH 10/11] fix(tooltip-placement): add close icon to tooltips

---
 .../tooltip-placement/tooltip-placement.component.html      | 6 +++---
 .../tooltip-placement/tooltip-placement.component.scss      | 4 ++++
 .../tooltip-placement/tooltip-placement.component.ts        | 5 +++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
index cf0b06579e..49977d66ce 100644
--- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     @for (position of positions; track position) {
-    <div igxTooltip>
-        {{ position }}
-    </div>
+        <div #tooltip="tooltip" igxTooltip>
+            {{ position }} <igx-icon (click)="tooltip.close()">close</igx-icon>
+        </div>
     }
 
     <button
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
index 097b45cd18..52e8b0fe13 100644
--- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss
@@ -8,3 +8,7 @@
     height: 120px;
     border-radius: 0.5rem;
 }
+
+igx-icon {
+    cursor: default;
+}
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts
index 81eca2c332..16858df9c9 100644
--- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts
+++ b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts
@@ -6,14 +6,15 @@ import {
     VerticalAlignment,
     PositionSettings,
     OverlaySettings,
-    TooltipPositionStrategy
+    TooltipPositionStrategy,
+    IgxIconComponent
 } from "igniteui-angular";
 
 @Component({
     selector: "app-tooltip-placement",
     styleUrls: ["./tooltip-placement.component.scss"],
     templateUrl: "./tooltip-placement.component.html",
-    imports: [IgxButtonDirective, IgxTooltipDirective]
+    imports: [IgxButtonDirective, IgxTooltipDirective, IgxIconComponent]
 })
 export class TooltipPlacementComponent {
     @ViewChildren(IgxTooltipDirective)

From 7686060059522fe80bcd5dccd4c87e20514838a6 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Tue, 21 Oct 2025 16:52:12 +0300
Subject: [PATCH 11/11] fix(build): resolving issues with theming build

---
 package-lock.json | 24 ++++++++++++------------
 package.json      |  6 +++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f0e81258b..241cad0560 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,11 +35,11 @@
         "express": "^4.18.2",
         "file-saver": "^2.0.2",
         "hammerjs": "^2.0.8",
-        "igniteui-angular": "^20.1.0",
+        "igniteui-angular": "^20.1.4",
         "igniteui-angular-charts": "^19.0.1",
         "igniteui-angular-core": "^19.0.1",
         "igniteui-angular-extras": "^20.0.0",
-        "igniteui-angular-i18n": "^20.1.0",
+        "igniteui-angular-i18n": "^20.1.4",
         "igniteui-dockmanager": "^1.17.0",
         "igniteui-live-editing": "^3.1.1",
         "igniteui-webcomponents": "^6.2.0",
@@ -12561,14 +12561,14 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/igniteui-angular": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.1.0.tgz",
-      "integrity": "sha512-14NqmRHVET6w3/rvg1547qtac8k3ka9n8APCdhTBLxEBuWm/PsJekKZd5eBTZNq04yzgOF3u0OuZuseV5pJWaA==",
+      "version": "20.1.4",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.1.4.tgz",
+      "integrity": "sha512-IhHfhDtcjpATs2ap97BelZDhl04lWCzsfngTplWsSvNfvodCGEeVqKlrFv7R++0TP9cv+vWsbb3S6Mp1imyGDQ==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@igniteui/material-icons-extended": "^3.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^20.0.0",
+        "igniteui-theming": "^21.0.2",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "tslib": "^2.3.0"
@@ -12636,9 +12636,9 @@
       }
     },
     "node_modules/igniteui-angular-i18n": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-20.1.0.tgz",
-      "integrity": "sha512-RJ2otnpjCX0d7S5lz3L4CO5CA92iY/mT4vmLEBN8Ao4XpWHWpVKEBV9ImRZi4sNwuwM6lJRBN5Ocqzho5UZkIA==",
+      "version": "20.1.4",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-i18n/-/igniteui-angular-i18n-20.1.4.tgz",
+      "integrity": "sha512-pwJTCMv+DiuibVD2dhi9upoab8scBC/EZFQwNG54fu8ZtHXYOXNr5Ge2gpqSir283Q5nehti//okhkVDZ63eZw==",
       "license": "MIT"
     },
     "node_modules/igniteui-dockmanager": {
@@ -12663,9 +12663,9 @@
       "license": "MIT"
     },
     "node_modules/igniteui-theming": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz",
-      "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz",
+      "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index a657afa7c0..ab9eab0058 100644
--- a/package.json
+++ b/package.json
@@ -72,11 +72,11 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^20.1.0",
+    "igniteui-angular": "^20.1.4",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^20.0.0",
-    "igniteui-angular-i18n": "^20.1.0",
+    "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-live-editing": "^3.1.1",
     "igniteui-webcomponents": "^6.2.0",
@@ -106,7 +106,7 @@
       "@angular/compiler": "^20.2.2"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "^20.1.0"
+      "igniteui-angular": "^20.1.4"
     }
   },
   "devDependencies": {