@syncfusion/ej2-inputs 27.2.4 → 28.1.37

package/styles/input/_bigger.scss

@@ -14,7 +14,7 @@
 
   .e-input.e-bigger#{$css}:focus,
   .e-bigger .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: $input-focus-bigger-padding-bottom;
     }
   }
@@ -130,7 +130,7 @@
   .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $input-bigger-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-bigger-left-child-min-height;
@@ -146,7 +146,7 @@
 
   .e-input.e-small.e-bigger#{$css}:focus,
   .e-bigger .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: $input-focus-bigger-small-padding-bottom;
     }
   }
@@ -200,7 +200,7 @@
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $input-bigger-small-left-icon-font-size;
       margin: $zero-value;
       min-height: $input-bigger-small-left-child-min-height;
@@ -273,7 +273,7 @@
     min-height: $input-bigger-small-child-min-height;
     min-width: $input-bigger-small-child-min-width;
     padding: $input-bigger-small-child-padding;
-    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border-radius: $input-bigger-small-child-border-radius;
       margin: $input-bigger-small-child-margin;
     }
@@ -348,7 +348,7 @@
   .e-bigger.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -8px;
     }
   }
@@ -358,7 +358,7 @@
   .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-font-size;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -9px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -417,7 +417,7 @@
   .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translate3d(0, -6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -493,7 +493,7 @@
   .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -558,6 +558,10 @@
       padding-right: 0;
       top: 14px;
     }
+    @else if $input-skin-name == 'tailwind3' {
+      top: -23px;
+      left: 2px;
+    }
   }
 
   .e-float-input.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
@@ -583,7 +587,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -7px;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -14px;
     }
   }
@@ -621,7 +625,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       top: -7px;
     }
-    @else if $input-skin-name == 'fluent2' {
+    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -10px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or  $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
@@ -670,7 +674,7 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -10px;
     }
   }
@@ -970,7 +974,7 @@
     @if $input-skin-name != 'fluent' {
       margin-right: $zero-value;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin: $zero-value;
     }
   }
@@ -1271,7 +1275,7 @@
   .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
   .e-bigger .e-float-input.e-control-wrapper textarea:focus,
   .e-bigger .e-float-input textarea:focus {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $textarea-bigger-padding;
     }
     @else {
@@ -1602,7 +1606,7 @@
       padding-right: $input-clear-icon-bigger-padding-right;
       padding-top: $input-clear-icon-bigger-padding-top;
     }
-    @else if $input-skin-name == 'fluent2' {
+    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $input-bigger-clear-icon-padding;
     }
     @else {
@@ -1619,7 +1623,7 @@
   .e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
   .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
   .e-bigger .e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
-    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
       padding-right: $input-clear-icon-bigger-padding-right;
       padding-top: $float-input-clear-icon-bigger-padding-top;
     }
@@ -1670,7 +1674,7 @@
   .e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
   .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
   .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
-    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
       padding-right: $input-clear-icon-small-bigger-padding-right;
       padding-top: $float-input-clear-icon-small-bigger-padding-top;
     }
@@ -1698,7 +1702,7 @@
     @else if $input-skin-name == 'tailwind' {
       top: 12px;
     }
-    @else if $input-skin-name == 'fluent2' {
+    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -28px;
     }
   }
@@ -1716,7 +1720,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -20px;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
@@ -1770,7 +1774,7 @@
     @if $input-skin-name == 'material' {
       min-height: 27px;
     }
-    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: 28px;
     }
   }
@@ -1797,7 +1801,7 @@
     @if $input-skin-name == 'material' {
       min-height: 28px;
     }
-    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: 26px;
     }
   }
@@ -1813,7 +1817,7 @@
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.86);
     }
-    @else if $input-skin-name == 'fluent2' {
+    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -14px;
       transform: translate3d(0, -6px, 0) scale(.86);
     }
@@ -1854,7 +1858,7 @@
   .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -10px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -1953,7 +1957,7 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translate3d(0, 6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -1983,7 +1987,7 @@
   .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-small-font-size;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -10px;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
@@ -2017,7 +2021,7 @@
   .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-bigger-font-size;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: -8px;
       transform: translate3d(0, -6px, 0) scale(.86);
     }
@@ -2067,7 +2071,7 @@
   .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translate3d(0, 6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -2121,7 +2125,7 @@
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translate3d(0, 6px, 0) scale(.86);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -2255,7 +2259,7 @@
   .e-bigger textarea.e-input,
   input.e-input.e-bigger,
   textarea.e-input.e-bigger {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $input-bigger-min-height;
     }
   }
@@ -2266,7 +2270,7 @@
   .e-small input.e-input.e-bigger,
   input.e-input.e-bigger.e-small,
   .e-small .e-bigger input.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $input-bigger-smaller-min-height;
     }
   }
@@ -3460,7 +3464,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       box-sizing: border-box;
     }
   }
@@ -3469,7 +3473,7 @@
   .e-bigger .e-filled.e-input-group,
   .e-filled.e-input-group.e-control-wrapper.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-filled-wrapper-padding;
     }
@@ -3483,7 +3487,7 @@
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-small-filled-wrapper-padding;
     }
@@ -3493,7 +3497,7 @@
   .e-bigger .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-filled-float-input-wrapper-padding;
     }
@@ -3507,7 +3511,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-top: $filled-wrapper-margin;
       padding: $bigger-small-filled-float-input-wrapper-padding;
     }
@@ -3521,7 +3525,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger,
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-filled-wrapper-rtl-padding;
     }
   }
@@ -3542,7 +3546,7 @@
   .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-small-filled-wrapper-rtl-padding;
     }
   }
@@ -3555,7 +3559,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -3576,7 +3580,7 @@
   .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-small-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -3597,21 +3601,21 @@
   .e-bigger .e-filled.e-input-group.e-input-focus .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus .e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-input-padding;
     }
   }
 
   .e-filled .e-input.e-bigger#{$css}:focus,
   .e-bigger .e-filled .e-input#{$css}:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: $filled-bigger-input-padding-bottom;
     }
   }
 
   .e-filled .e-input.e-small.e-bigger#{$css}:focus,
   .e-bigger .e-filled .e-input.e-small#{$css}:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: $filled-bigger-small-input-padding-bottom;
     }
   }
@@ -3637,7 +3641,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-input-padding;
     }
   }
@@ -3648,7 +3652,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger input,
   .e-filled.e-float-input.e-control-wrapper input.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-float-input-padding;
     }
   }
@@ -3659,7 +3663,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
   .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-float-input-padding;
     }
   }
@@ -3688,7 +3692,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
   .e-bigger .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-input-rtl-padding;
       text-indent: 0;
     }
@@ -3714,7 +3718,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-bigger .e-filled.e-float-input.e-rtl.e-input-focus input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -3758,7 +3762,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-bigger.e-small.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-input-rtl-padding;
       text-indent: 0;
     }
@@ -3800,7 +3804,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-bigger.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-bigger.e-small.e-input-focus input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -3818,7 +3822,7 @@
   .e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-font-size;
     }
   }
@@ -3847,7 +3851,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
   .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-font-size;
     }
   }
@@ -3856,7 +3860,7 @@
   .e-bigger .e-filled.e-input-group:not(.e-float-input) .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $bigger-filled-default-input-min-height;
     }
   }
@@ -3873,7 +3877,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $bigger-filled-input-min-height;
     }
   }
@@ -3882,7 +3886,7 @@
   .e-bigger .e-filled.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $bigger-small-filled-default-input-min-height;
     }
   }
@@ -3902,7 +3906,7 @@
   .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger.e-small input,
   .e-bigger .e-float-input.e-control-wrapper.e-filled.e-input-group.e-small input,
   .e-small .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger input  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $bigger-small-filled-input-min-height;
     }
   }
@@ -3943,11 +3947,11 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: 2px;
     }
   }
@@ -3964,7 +3968,7 @@
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -4008,7 +4012,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
     }
@@ -4034,7 +4038,7 @@
   .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
   .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -4066,7 +4070,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-float-label-font-size;
       top: $bigger-filled-input-label-top;
     }
@@ -4086,7 +4090,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top;
       transform: none;
@@ -4171,7 +4175,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       transform: translateY(-50%) scale(.75);
     }
   }
@@ -4186,7 +4190,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-float-label-font-size;
       top: $bigger-small-filled-input-label-top;
     }
@@ -4208,7 +4212,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: $bigger-filled-input-label-left;
     }
   }
@@ -4239,13 +4243,13 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       right: $bigger-filled-input-label-left;
     }
   }
 
   .e-small .e-filled.e-float-input.e-bigger label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: $small-filled-input-label-left;
     }
   }
@@ -4266,7 +4270,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: $bigger-small-filled-input-label-left;
     }
   }
@@ -4301,7 +4305,7 @@
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       right: $bigger-small-filled-input-label-left;
     }
   }
@@ -4344,7 +4348,7 @@
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       right: $zero-value;
     }
   }
@@ -4361,7 +4365,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-icon-size;
       margin-bottom: $zero-value;
       margin-top: $zero-value;
@@ -4419,7 +4423,7 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
   .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -4436,7 +4440,7 @@
       min-width: $bigger-filled-input-icon-min-height;
       padding: $zero-value $zero-value $zero-value 8px;
     }
-    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-icon-size;
       height: $bigger-filled-input-icon-min-height;
       min-width: $bigger-filled-input-icon-min-height;
@@ -4449,7 +4453,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-icon-size;
       min-height: $bigger-small-filled-input-icon-min-height;
       min-width: $bigger-small-filled-input-icon-min-height;
@@ -4469,12 +4473,12 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-icon-size;
       margin-bottom: $zero-value;
       margin-top: $zero-value;
       padding: 8px;
-      @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
         padding: 0;
         margin: 9px 12px 9px 0;
       }
@@ -4487,7 +4491,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 8px;
     }
@@ -4499,7 +4503,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 8px;
     }
@@ -4517,7 +4521,7 @@
       min-width: $bigger-filled-input-icon-min-height;
       padding: $zero-value $zero-value $zero-value 8px;
     }
-    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-clear-icon-size;
       height: $bigger-filled-input-icon-min-height;
       min-width: $bigger-filled-input-icon-min-height;
@@ -4537,7 +4541,7 @@
       padding: $zero-value;
       margin: 8px;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $input-clear-icon-padding;
       margin: $input-clear-icon-margin;
     }
@@ -4555,7 +4559,7 @@
       min-width: $bigger-small-filled-input-icon-min-height;
       padding: $zero-value $zero-value $zero-value 8px;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-clear-icon-size;
       min-height: $bigger-small-filled-input-icon-min-height;
       min-width: $bigger-small-filled-input-icon-min-height;
@@ -4644,7 +4648,7 @@
   .e-bigger .e-filled.e-float-input .e-clear-icon::before,
   .e-bigger .e-filled.e-input-group .e-clear-icon::before,
   .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-clear-icon-size;
     }
   }
@@ -4661,7 +4665,7 @@
   .e-small .e-filled.e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
   .e-bigger .e-filled.e-float-input.e-small input:first-child ~ .e-clear-icon::before {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-clear-icon-size;
     }
   }
@@ -4686,7 +4690,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $bigger-filled-input-label-top-after-floating;
     }
   }
@@ -4711,7 +4715,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $bigger-small-filled-input-label-top-after-floating;
     }
   }
@@ -4728,7 +4732,7 @@
   .e-bigger.e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $bigger-filled-input-label-top;
     }
   }
@@ -4745,7 +4749,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $bigger-small-filled-input-label-top;
     }
   }
@@ -4756,7 +4760,7 @@
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-filled-input-icon-size;
       margin: $zero-value;
       min-height: $bigger-filled-input-left-icon-min-height;
@@ -4771,7 +4775,7 @@
   .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $bigger-small-filled-input-icon-size;
       margin: $zero-value;
       min-height: $bigger-small-filled-input-left-icon-min-height;
@@ -4792,7 +4796,7 @@
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin: $zero-value;
       min-height: $bigger-filled-input-left-icon-min-height;
       min-width: $bigger-filled-input-left-icon-min-width;
@@ -4812,7 +4816,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin: $zero-value;
       min-height: $bigger-small-filled-input-left-icon-min-height;
       min-width: $bigger-small-filled-input-left-icon-min-width;
@@ -4843,7 +4847,7 @@
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: $zero-value;
     }
   }
@@ -4864,7 +4868,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
   .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
   .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-right: $zero-value;
     }
   }
@@ -4893,7 +4897,7 @@
   .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl.e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-left: $zero-value;
     }
   }
@@ -4906,7 +4910,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
   .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
   .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-left: $zero-value;
       margin-right: $zero-value;
     }
@@ -4935,7 +4939,7 @@
   .e-bigger .e-filled.e-input-group.e-input-focus textarea,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-textarea-padding;
     }
   }
@@ -4946,7 +4950,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
   .e-bigger .e-filled.e-float-input textarea,
   .e-bigger .e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-float-textarea-padding;
     }
   }
@@ -4977,7 +4981,7 @@
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
   .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-textarea-padding;
     }
   }
@@ -4997,7 +5001,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper textarea {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-float-textarea-padding;
     }
   }
@@ -5006,7 +5010,7 @@
   .e-bigger .e-filled.e-input-group.e-multi-line-input,
   .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-filled-textarea-wrapper-padding;
     }
   }
@@ -5019,7 +5023,7 @@
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
   .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-small-filled-textarea-wrapper-padding;
     }
   }
@@ -5028,7 +5032,7 @@
   .e-bigger .e-filled.e-float-input.e-multi-line-input,
   .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-filled-float-textarea-wrapper-padding;
     }
   }
@@ -5041,7 +5045,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $bigger-small-filled-float-textarea-wrapper-padding;
     }
   }
@@ -5066,7 +5070,7 @@
   .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
   .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
   .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-textarea-padding;
       text-indent: 0;
     }
@@ -5088,7 +5092,7 @@
   .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
   .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-float-textarea-padding;
       text-indent: 0;
     }
@@ -5120,7 +5124,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea.e-input:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-textarea-padding;
       text-indent: 0;
     }
@@ -5150,7 +5154,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small textarea:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-bigger-small-float-textarea-padding;
       text-indent: 0;
     }
@@ -5164,7 +5168,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border: $input-group-full-border;
       border-width: $zero-value;
       margin-left: 8px;
@@ -5187,7 +5191,7 @@
   .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       margin-left: $zero-value;
       margin-right: 8px;
     }
@@ -5241,13 +5245,13 @@
   }
 
   .e-bigger .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-textarea) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: 0;
     }
   }
 
   .e-bigger textarea.e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding-bottom: 6px;
     }
   }
@@ -5471,7 +5475,7 @@
   .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-active-accent-color;
     }
   }
@@ -5632,7 +5636,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $filled-input-float-label-color;
     }
   }
@@ -5697,7 +5701,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-success-color;
     }
   }
@@ -5750,7 +5754,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-warning-color;
     }
   }
@@ -5851,7 +5855,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $filled-input-float-label-color;
     }
   }
@@ -5912,7 +5916,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-active-accent-color;
     }
   }
@@ -5941,7 +5945,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $filled-input-disabled-font-color;
     }
   }
@@ -6038,7 +6042,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-success-color;
     }
   }
@@ -6147,7 +6151,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       color: $input-warning-color;
     }
   }