@syncfusion/ej2-inputs 27.2.4 → 28.1.37

package/styles/input/_layout.scss

@@ -35,6 +35,9 @@
     font-family: $input-font-family;
     font-size: $input-font-size;
     font-weight: normal;
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
+      font-feature-settings: 'calt' 0;
+    }
   }
 
   .e-input-group input.e-input,
@@ -139,7 +142,7 @@
   .e-small .e-float-input.e-control-wrapper.e-input-group input,
   .e-small .e-float-input,
   .e-small .e-float-input.e-control-wrapper {
-    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       border-radius: $input-small-border-radius;
     }
   }
@@ -274,7 +277,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       border-left-width: $zero-value;
     }
   }
@@ -322,7 +325,7 @@
 
   .e-input-group .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       border-bottom-right-radius: $input-group-icon-border-radius;
       border-top-right-radius: $input-group-icon-border-radius;
     }
@@ -330,7 +333,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       border-bottom-left-radius: $input-group-icon-border-radius;
       border-top-left-radius: $input-group-icon-border-radius;
     }
@@ -340,7 +343,7 @@
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
   .e-rtl .e-input-group .e-input-group-icon:last-child,
   .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       border-bottom-left-radius: $input-group-icon-border-radius;
       border-bottom-right-radius: $zero-value;
       border-top-left-radius: $input-group-icon-border-radius;
@@ -521,7 +524,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
       border-left-width: $input-border-left-width;
     }
   }
@@ -572,7 +575,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
       border-left-width: $input-border-left-width;
       border-right-width: $zero-value;
     }
@@ -580,7 +583,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon:not(:last-child),
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:not(:last-child) {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
       border-left-width: $input-border-left-width;
     }
   }
@@ -751,10 +754,15 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind') {
+    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -35px, 0) scale(1);
+      @if $input-skin-name == 'tailwind3' {
+        padding-left: 0;
+        left: 12px;
+        top: 40%;
+      }
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
@@ -806,7 +814,7 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind') {
+    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -34px, 0) scale(1);
@@ -859,10 +867,14 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       top: -8px;
     }
-    @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' {
+    @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' or $input-skin-name == 'tailwind3' {
       padding-right: 0;
       top: 17px;
     }
+    @if $input-skin-name == 'tailwind3' {
+      padding-left: 0;
+      left: 12px;
+    }
   }
 
   .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
@@ -877,7 +889,7 @@
   .e-small .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .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: -7px;
     }
   }
@@ -1508,7 +1520,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left),
   .e-filled.e-input-group.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left {
-    @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-bottom: $input-group-border;
     }
   }
@@ -1538,7 +1550,7 @@
   .e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
   .e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border: $input-group-full-border;
       border-width: $input-group-full-border-width;
       padding-top: 1px;
@@ -1579,7 +1591,7 @@
       border-bottom-color: transparent;
       color: $input-disable-font-color;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border-color: $input-disable-border-color;
     }
   }
@@ -1673,7 +1685,7 @@
   .e-float-input.e-input-group textarea:focus,
   .e-float-input.e-input-group.e-control-wrapper input:focus,
   .e-float-input.e-input-group.e-control-wrapper textarea {
-    @if $input-skin-name == 'tailwind' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
       box-shadow: none;
     }
   }
@@ -2214,7 +2226,7 @@
 
   .e-float-input.e-input-group .e-clear-icon,
   .e-float-input.e-input-group.e-control-wrapper .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-padding-right;
       padding-top: $float-input-clear-icon-padding-top;
     }
@@ -2272,7 +2284,7 @@
   .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
   .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
   .e-small .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-small-padding-right;
       padding-top: $float-input-clear-icon-small-padding-top;
     }
@@ -2318,7 +2330,7 @@
   .e-float-input .e-input-in-wrap,
   .e-float-input.e-control-wrapper .e-input-in-wrap {
     width: 100%;
-    @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' {
+    @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' or $input-skin-name == 'tailwind3' {
       display: flex;
       position: relative;
     }
@@ -2327,7 +2339,7 @@
   .e-float-input .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text {
     right: 0;
-    @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' {
+    @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' or $input-skin-name == 'tailwind3' {
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: middle;
@@ -2400,9 +2412,12 @@
   .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     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: $textarea-float-top;
       transform: translate3d(0, 6px, 0) scale(.92);
+      @if $input-skin-name == 'tailwind3' {
+        left: 2px;
+      }
     }
     @else if $input-skin-name == 'fabric' or  $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
@@ -2443,7 +2458,11 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       top: -21px;
     }
-    @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' {
+    @if $input-skin-name == 'tailwind3' {
+      top: -21px;
+      left: 2px;
+    }
+    @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' or $input-skin-name == 'tailwind3' {
       top: 16px;
     }
   }
@@ -2456,7 +2475,7 @@
     @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' {
       top: 15px;
     }
-    @else if $input-skin-name == 'tailwind' {
+    @else if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
       top: 13px;
     }
   }
@@ -2483,7 +2502,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       top: -11px;
     }
-    @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' {
+    @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' or $input-skin-name == 'tailwind3' {
       top: 15px;
     }
   }
@@ -2752,7 +2771,7 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind'  or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
+    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3'  or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -40px, 0) scale(1);
@@ -2823,7 +2842,7 @@
   .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .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' {
@@ -3082,7 +3101,7 @@
   .e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
   .e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border: 1px solid $underline-border-color;
       border-width: $input-group-full-border-width;
       padding-top: 1px;
@@ -3211,7 +3230,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea,
   .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input:focus,
   .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input:focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
       box-sizing: border-box;
       margin: $outline-textarea-margin-top;
       padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
@@ -3410,7 +3429,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
       font-size: $outline-small-label-font-size;
     }
   }
@@ -3997,10 +4016,13 @@
   .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
       top: $outline-float-label-top;
       transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
     }
+    @if $input-skin-name == 'tailwind3' {
+      left: 2px;
+    }
   }
 
   .e-outline textarea,
@@ -4199,7 +4221,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-input,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea,
   .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;
     }
   }
@@ -4208,7 +4230,7 @@
   .e-filled.e-float-input textarea,
   .e-filled.e-float-input.e-control-wrapper input,
   .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' {
       border: $float-input-border;
       border-width: $zero-value;
     }
@@ -4226,7 +4248,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-filled.e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
   .e-filled.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
-    @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-bottom-width: $zero-value;
     }
   }
@@ -4255,14 +4277,14 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error 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' {
       border-width: $zero-value;
     }
   }
 
   .e-filled.e-input-group,
   .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' {
       border-radius: 4px 4px $zero-value $zero-value;
       padding: $filled-wrapper-padding;
     }
@@ -4271,7 +4293,7 @@
   .e-filled.e-input-group.e-small,
   .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small .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: $small-filled-wrapper-padding;
     }
@@ -4279,7 +4301,7 @@
 
   .e-filled.e-float-input,
   .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' {
       border: $input-group-full-border;
       border-radius: 4px 4px $zero-value $zero-value;
       border-width: $input-group-full-border-width;
@@ -4291,7 +4313,7 @@
   .e-filled.e-float-input.e-small,
   .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small .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: $small-filled-float-input-wrapper-padding;
     }
@@ -4301,7 +4323,7 @@
   .e-rtl.e-filled.e-input-group.e-control-wrapper,
   .e-rtl .e-filled.e-input-group,
   .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: $filled-wrapper-rtl-padding;
     }
   }
@@ -4312,7 +4334,7 @@
   .e-rtl .e-filled.e-input-group.e-small,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
   .e-small.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: $small-filled-wrapper-rtl-padding;
     }
   }
@@ -4321,7 +4343,7 @@
   .e-rtl.e-filled.e-float-input.e-control-wrapper,
   .e-rtl .e-filled.e-float-input,
   .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: $filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -4332,7 +4354,7 @@
   .e-rtl .e-filled.e-float-input.e-small,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
   .e-small.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: $small-filled-float-input-wrapper-rtl-padding;
     }
   }
@@ -4349,19 +4371,19 @@
   .e-filled.e-input-group.e-control-wrapper textarea.e-input:focus,
   .e-filled.e-input-group.e-input-focus input.e-input,
   .e-filled.e-input-group.e-control-wrapper.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-input-padding;
     }
   }
 
   .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-input-padding-bottom;
     }
   }
 
   .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-small-input-padding-bottom;
     }
   }
@@ -4373,21 +4395,21 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
   .e-filled.e-input-group.e-small.e-input-focus .e-input,
   .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-small-input-padding;
     }
   }
 
   .e-filled.e-float-input input,
   .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-float-input-padding;
     }
   }
 
   .e-filled.e-float-input.e-small input,
   .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-small-float-input-padding;
     }
   }
@@ -4409,7 +4431,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
   .e-rtl .e-filled.e-input-group.e-control-wrapper.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-input-rtl-padding;
       text-indent: 0;
     }
@@ -4431,7 +4453,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.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-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -4461,7 +4483,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
   .e-small .e-filled.e-input-group.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-small-input-rtl-padding;
       text-indent: 0;
     }
@@ -4487,7 +4509,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-focus input,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-small .e-filled.e-float-input.e-rtl.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-small-float-input-rtl-padding;
       text-indent: 0;
     }
@@ -4499,7 +4521,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-disabled,
   .e-filled.e-float-input.e-input-group.e-disabled,
   .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: $filled-input-font-size;
     }
   }
@@ -4516,7 +4538,7 @@
   .e-small .e-filled.e-float-input.e-input-group.e-disabled,
   .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-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: $small-filled-input-font-size;
     }
   }
@@ -4525,7 +4547,7 @@
   .e-small .e-filled.e-input-group:not(.e-float-input) .e-input,
   .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: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: $small-filled-default-input-min-height;
     }
   }
@@ -4542,7 +4564,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .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: $small-filled-input-min-height;
     }
   }
@@ -4551,7 +4573,7 @@
   .e-filled.e-input-group.e-control-wrapper input.e-input,
   .e-filled.e-input-group:not(.e-float-input) input.e-input,
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper 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: $filled-default-input-min-height;
     }
   }
@@ -4559,7 +4581,7 @@
   .e-float-input.e-filled.e-input-group.e-control-wrapper input,
   .e-float-input.e-filled input,
   .e-float-input.e-filled.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' {
       min-height: $filled-input-min-height;
     }
   }
@@ -4569,7 +4591,7 @@
   .e-filled.e-float-input.e-control-wrapper label.e-float-text,
   .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper: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: $filled-float-label-font-size;
       left: $filled-input-label-left;
       letter-spacing: .009375em;
@@ -4586,7 +4608,7 @@
 
   .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .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: $filled-float-label-font-size;
       padding-left: $float-label-padding;
       top: $filled-input-label-top;
@@ -4609,12 +4631,12 @@
   .e-filled.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
   .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
   .e-filled.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' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       left: 1px;
     }
   }
@@ -4631,7 +4653,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.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' {
       font-size: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -4644,7 +4666,7 @@
   .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .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: $filled-float-label-font-size;
       top: $filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -4674,7 +4696,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
   .e-small .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: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
     }
@@ -4692,7 +4714,7 @@
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
   .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-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: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top-after-floating;
       transform: translateY(-50%) scale(.75);
@@ -4718,7 +4740,7 @@
   .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
   .e-filled.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ 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' {
       font-size: $small-filled-float-label-font-size;
       top: $small-filled-input-label-top;
     }
@@ -4732,7 +4754,7 @@
   .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:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .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: $filled-input-label-left;
     }
   }
@@ -4750,7 +4772,7 @@
   .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-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .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: $filled-input-label-left;
     }
   }
@@ -4770,7 +4792,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .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: $small-filled-input-label-left;
     }
   }
@@ -4801,14 +4823,14 @@
   .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-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .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: $small-filled-input-label-left;
     }
   }
 
   .e-filled.e-float-input .e-float-line,
   .e-float-input.e-filled.e-control-wrapper .e-float-line {
-    @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' {
       bottom: -1px;
       position: absolute;
     }
@@ -4845,7 +4867,7 @@
   .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-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-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;
     }
   }
@@ -4857,7 +4879,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       bottom: -1px;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       bottom: -.1px;
     }
   }
@@ -4868,7 +4890,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .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' {
       font-size: $filled-input-icon-size;
       margin-bottom: $zero-value;
       margin-top: $zero-value;
@@ -4902,7 +4924,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .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' {
       padding: $zero-value 8px $zero-value $zero-value;
     }
   }
@@ -4911,7 +4933,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .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' {
       font-size: $small-filled-input-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
@@ -4935,7 +4957,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .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' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
   }
@@ -4946,12 +4968,12 @@
   .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .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: $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;
       }
@@ -4962,7 +4984,7 @@
   .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .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: $small-filled-input-icon-size;
       padding: $zero-value $zero-value $zero-value 4px;
     }
@@ -4976,7 +4998,7 @@
       font-size: $filled-input-clear-icon-size;
       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: $filled-input-clear-icon-size;
       padding: $input-clear-icon-padding;
     }
@@ -4989,7 +5011,7 @@
       min-width: $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' {
       min-height: $filled-input-icon-min-height;
       min-width: $filled-input-icon-min-height;
       padding: $input-clear-icon-padding;
@@ -5001,7 +5023,7 @@
     @if $input-skin-name == 'material' {
       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' {
       padding: $zero-value;
       margin: 2px;
       height: 32px;
@@ -5020,7 +5042,7 @@
       min-width: $small-filled-input-icon-min-height;
       padding: $zero-value $zero-value $zero-value 4px;
     }
-    @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: $small-filled-input-clear-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
@@ -5097,7 +5119,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       padding: $zero-value 4px $zero-value $zero-value;
     }
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $zero-value;
     }
   }
@@ -5106,7 +5128,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
   .e-filled.e-input-group .e-clear-icon::before,
   .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: $filled-input-clear-icon-size;
     }
   }
@@ -5121,7 +5143,7 @@
   .e-small .e-filled.e-float-input .e-clear-icon::before,
   .e-small .e-filled.e-input-group .e-clear-icon::before,
   .e-small .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: $small-filled-input-clear-icon-size;
     }
   }
@@ -5138,7 +5160,7 @@
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input 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' {
       top: $filled-input-label-top-after-floating;
     }
   }
@@ -5155,7 +5177,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small .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: $small-filled-input-label-top-after-floating;
     }
   }
@@ -5168,7 +5190,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .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-style: none;
       border-width: $zero-value;
     }
@@ -5178,7 +5200,7 @@
   .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-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .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: $filled-input-label-top;
     }
   }
@@ -5191,14 +5213,14 @@
   .e-small .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-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .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: $small-filled-input-label-top;
     }
   }
 
   .e-filled.e-input-group:not(.e-float-input).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 {
-    @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: $zero-value;
       min-height: $filled-input-left-icon-min-height;
@@ -5213,7 +5235,7 @@
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
   .e-small .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: $small-filled-input-icon-size;
       margin: $zero-value;
       min-height: $small-filled-input-left-icon-min-height;
@@ -5226,7 +5248,7 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-input-group.e-control-wrapper.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 {
-    @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: $filled-input-left-icon-min-height;
       min-width: $filled-input-left-icon-min-width;
@@ -5246,7 +5268,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group.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: $small-filled-input-left-icon-min-height;
       min-width: $small-filled-input-left-icon-min-width;
@@ -5270,7 +5292,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
   .e-small .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-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;
     }
   }
@@ -5287,7 +5309,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .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;
     }
   }
@@ -5304,7 +5326,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl .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-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;
     }
   }
@@ -5321,7 +5343,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon,
   .e-rtl.e-small .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;
     }
@@ -5344,14 +5366,14 @@
   .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
   .e-filled.e-input-group.e-control-wrapper textarea.e-input,
   .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-textarea-padding;
     }
   }
 
   .e-filled.e-float-input textarea,
   .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-float-textarea-padding;
     }
   }
@@ -5373,7 +5395,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
   .e-small .e-filled.e-input-group.e-input-focus textarea,
   .e-small .e-filled.e-input-group.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-small-textarea-padding;
     }
   }
@@ -5384,14 +5406,14 @@
   .e-filled.e-float-input.e-control-wrapper textarea.e-small,
   .e-small .e-filled.e-float-input textarea,
   .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-small-float-textarea-padding;
     }
   }
 
   .e-filled.e-input-group.e-multi-line-input,
   .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: $filled-textarea-wrapper-padding;
     }
   }
@@ -5399,14 +5421,14 @@
   .e-filled.e-input-group.e-small.e-multi-line-input,
   .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-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: $small-filled-textarea-wrapper-padding;
     }
   }
 
   .e-filled.e-float-input.e-multi-line-input,
   .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: $filled-float-textarea-wrapper-padding;
     }
   }
@@ -5414,7 +5436,7 @@
   .e-filled.e-float-input.e-small.e-multi-line-input,
   .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-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: $small-filled-float-textarea-wrapper-padding;
     }
   }
@@ -5432,7 +5454,7 @@
   .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper 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-textarea-padding;
       text-indent: 0;
     }
@@ -5450,7 +5472,7 @@
   .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper 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-float-textarea-padding;
       text-indent: 0;
     }
@@ -5476,7 +5498,7 @@
   .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
   .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
   .e-small .e-filled.e-input-group.e-multi-line-input.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-small-textarea-padding;
       text-indent: 0;
     }
@@ -5498,7 +5520,7 @@
   .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
   .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
   .e-small .e-filled.e-float-input.e-multi-line-input.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-small-float-textarea-padding;
       text-indent: 0;
     }
@@ -5508,7 +5530,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .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;
@@ -5522,7 +5544,7 @@
   .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .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;
     }
@@ -5536,7 +5558,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .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' {
       margin-left: 4px;
     }
   }
@@ -5557,7 +5579,7 @@
   .e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .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: 4px;
     }
@@ -5567,7 +5589,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
-    @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' {
       @include input-group-animation;
       bottom: -1px;
     }
@@ -5577,7 +5599,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
-    @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' {
       @include input-group-animation-width;
       bottom: -1px;
     }
@@ -5587,7 +5609,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
-    @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' {
       width: $zero-value;
     }
   }
@@ -5600,7 +5622,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-success.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-warning.e-float-icon-left,
   .e-filled.e-input-group.e-control-wrapper.e-error.e-float-icon-left {
-    @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: $input-group-full-border-width;
     }