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 @@
+
+
+ Team Members (4)
+
+ @for (member of members; track member) {
+
+
+
+
+
+ {{ member.name }}
+
+
+ }
+
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 @@
+
+ @for (chip of chipList; track chip) {
+
+ {{chip.icon}}
+ {{chip.text}}
+
+ }
+
+
+
+ check_circle
+
+
+
+ delete
+
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..b3c0b7f338 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
@@ -16,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 c5498f092c..acb3a45ede 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';
@@ -16,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';
@@ -63,6 +66,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'],
@@ -208,11 +216,21 @@ 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'],
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-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 @@
+person
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/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 @@
+
+
+ Sofia
+ London
+ New York
+ Tokyo
+
+
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 @@
+
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 @@
+
+ Styled 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..c6d537969d 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" },
@@ -45,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" },
@@ -52,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" },
@@ -59,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 ad5a639c84..665bf7c9e1 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';
@@ -43,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';
@@ -52,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';
@@ -73,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 = [
{
@@ -120,6 +128,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 +188,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 +213,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'],
@@ -295,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'],
@@ -330,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'],
@@ -365,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'],
@@ -385,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'],
@@ -404,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 @@
+
+
+
+ home
+
+
+
+
+ home
+
+
+
+
+ home
+
+
+
+
+ +359
+ Phone
+
+ phone
+
+ Ex.: +359 888 123 456
+
+
+
+ +359
+ Phone
+
+ phone
+
+ Ex.: +359 888 123 456
+
+
+
+ +359
+ Search
+
+ phone
+
+ Ex.: +359 888 123 456
+
+
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 @@
+
+ New York
+ London
+ Sofia
+ Tokyo
+ Singapore
+
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 @@
+
+
+ Select An Item
+ @for (item of items; track item) {
+
+ {{item}}
+
+ }
+
+
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 @@
+
+ @for (setting of settings; track setting) {
+
+ {{ setting.name }}
+
+ }
+
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 @@
+
+
+
+
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 @@
+
+
+
+
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 @@
+
+
+
+
+
+ Her name is Madelyn James
+
+
+
+
+
+
+
+ {{ card.title }}
+ {{ card.subtitle }}
+
+
+
+ {{ card.content }}
+
+
+
+ @for (icon of card.icons; track icon) {
+
+ {{icon}}
+
+ }
+
+
+
+
+
+
+
+ Golden Retriever
+
+
+ Medium-large gun dog
+
+
+
+
+
+
+ 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.
+
+
Read more
+
+
+
+
+
+ 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.
+
+
+
+
+ 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.
+
+
+
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 @@
+
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/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 @@
+
+
+
+ library_music
+ Songs
+
+
+ @for (song of songsList; track song) {
+
+ {{song.title}} {{song.artist}}
+
+ }
+
+
+
+
+ video_library
+ Movies
+
+
+ @for (movie of moviesList; track movie) {
+
+ {{movie.title}} {{movie.genre}}
+
+ }
+
+
+
+
+ library_books
+ Books
+
+
+ @for (book of booksList; track book) {
+
+ {{book.title}} {{book.author}}
+
+ }
+
+
+
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/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 @@
+
+
+
+ library_music
+ Albums
+
+
+ Albums
+
+
+
+
+ favorite
+ Favorite
+
+
+ Favorite
+
+
+
+
+ info
+ Details
+
+
+ Details
+
+
+
+
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 @@
+
+
+
+
+
+
+
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 @@
+
+
+ Contacts
+ @for (contact of contacts; track contact) {
+
+ {{ contact.name }}
+ {{ contact.phone }}
+ star
+
+ }
+
+
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 @@
+
+
+ @for (type of data; track type) {
+
+ {{ type.Name }}
+ @for (value of type.Children; track value) {
+
+ {{ value.Name }}
+
+ }
+
+ }
+
+
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 @@
+
+
+
+
+ menu
+
+
+
+
+ search
+
+
+ favorite
+
+
+ more_vert
+
+
+
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 @@
+Send message
+
+
+ Message sent
+
+
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 @@
+
+
+
+
+ Show Toast
+ Hide Toast
+
+
+
+
This is the toast message.
+
+
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/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 @@
+