@syncfusion/ej2-inputs 27.2.2 → 28.1.33

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;
     }
   }
@@ -1197,6 +1201,9 @@
     @else {
       padding-left: $input-bigger-text-indent;
     }
+    @if $input-skin-name == 'tailwind3' {
+      padding-right: $input-bigger-text-indent;
+    }
     text-indent: 0;
   }
 
@@ -1271,7 +1278,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 +1609,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 +1626,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 +1677,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 +1705,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 +1723,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 +1777,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 +1804,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 +1820,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 +1861,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 +1960,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 +1990,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 +2024,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 +2074,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 +2128,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 +2262,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 +2273,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 +3467,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 +3476,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 +3490,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 +3500,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 +3514,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 +3528,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 +3549,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 +3562,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 +3583,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 +3604,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 +3644,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 +3655,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 +3666,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 +3695,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 +3721,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 +3765,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 +3807,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 +3825,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 +3854,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 +3863,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 +3880,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 +3889,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 +3909,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 +3950,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 +3971,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 +4015,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 +4041,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 +4073,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 +4093,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 +4178,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 +4193,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 +4215,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 +4246,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 +4273,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 +4308,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 +4351,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 +4368,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 +4426,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 +4443,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 +4456,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 +4476,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 +4494,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 +4506,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 +4524,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 +4544,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 +4562,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 +4651,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 +4668,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 +4693,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 +4718,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 +4735,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 +4752,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 +4763,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 +4778,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 +4799,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 +4819,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 +4850,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 +4871,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 +4900,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 +4913,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 +4942,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 +4953,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 +4984,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 +5004,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 +5013,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 +5026,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 +5035,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 +5048,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 +5073,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 +5095,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 +5127,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 +5157,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 +5171,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 +5194,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 +5248,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 +5478,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 +5639,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 +5704,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 +5757,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 +5858,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 +5919,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 +5948,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 +6045,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 +6154,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;
     }
   }