@syncfusion/ej2-inputs 27.2.2 → 28.1.33

package/styles/input/_theme.scss

@@ -406,14 +406,14 @@
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::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' {
       background: $input-error-color;
     }
   }
 
   .e-input-group:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
-    @if $skin-name != 'bootstrap5.3'{
+    @if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
       background: $input-group-pressed-bg;
     }
     color: $input-group-pressed-color;
@@ -512,7 +512,7 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::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-bg;
     }
   }
@@ -565,7 +565,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::after,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::before,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::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-success-animation-bg;
     }
   }
@@ -597,7 +597,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::after,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::before,
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::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-warning-animation-bg;
     }
   }
@@ -635,7 +635,7 @@
   .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::after,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::before,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::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-error-animation-bg;
     }
   }
@@ -676,7 +676,7 @@
   .e-input-group.e-control-wrapper.e-warning:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-error:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-control-wrapper.e-error:not(.e-disabled) .e-input-group-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-icon-font-color;
     }
   }
@@ -706,7 +706,7 @@
       -webkit-box-shadow: $input-border-shadow;
       box-shadow: $input-border-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI'  {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI'  {
       border-radius: $input-groupo-focus-border-radius;
       box-shadow: $input-group-focus-box-shadow;
     }
@@ -735,7 +735,7 @@
   .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
   .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
       box-shadow: none;
     }
   }
@@ -833,7 +833,7 @@
 
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
       border-color: $input-group-border-color-focus;
     }
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
@@ -843,7 +843,7 @@
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
       border-color: $input-group-border-color-focus;
       border-radius: $input-groupo-focus-border-radius;
       box-shadow: $input-group-focus-box-shadow;
@@ -925,7 +925,7 @@
     @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
       border-color: $input-group-full-border-color;
     }
-    @if $input-skin-name == 'tailwind' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
       box-shadow: $input-group-border-shadow;
     }
     @if $input-skin-name == 'FluentUI' {
@@ -1005,6 +1005,15 @@
     @include input-state-color ($input-group-success-color);
   }
 
+  .e-input-group.e-success.e-input-focus,
+  .e-input-group.e-control-wrapper.e-success.e-input-focus,
+  .e-input-group.e-success:not(.e-float-icon-left).e-input-focus,
+  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left).e-input-focus {
+    @if $skin-name == 'tailwind3' {
+      box-shadow: $input-success-focus-box-shadow;
+    }
+  }
+
   .e-input-group.e-float-icon-left.e-success .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
@@ -1019,6 +1028,15 @@
     @include input-state-color ($input-group-warning-color);
   }
 
+  .e-input-group.e-warning.e-input-focus,
+  .e-input-group.e-control-wrapper.e-warning.e-input-focus,
+  .e-input-group.e-warning:not(.e-float-icon-left).e-input-focus,
+  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left).e-input-focus {
+    @if $skin-name == 'tailwind3'  {
+      box-shadow: $input-warning-focus-box-shadow;
+    }
+  }
+
   .e-input-group.e-float-icon-left.e-warning .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-warning .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
@@ -1033,6 +1051,15 @@
     @include input-state-color ($input-group-error-color);
   }
 
+  .e-input-group.e-error.e-input-focus,
+  .e-input-group.e-control-wrapper.e-error.e-input-focus,
+  .e-input-group.e-error:not(.e-float-icon-left).e-input-focus,
+  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left).e-input-focus {
+    @if $skin-name == 'tailwind3' {
+      box-shadow: $input-error-focus-box-shadow;
+    }
+  }
+
   .e-input-group.e-float-icon-left.e-error .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
@@ -1163,7 +1190,7 @@
   .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top {
-    @if $input-skin-name != 'fluent2' {
+    @if $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
       color: $float-label-font-color;
     }
     @else {
@@ -1284,7 +1311,7 @@
   .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:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-float-input.e-control-wrapper: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;
     }
   }
@@ -1343,7 +1370,7 @@
   .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' and $input-skin-name != 'fluent2' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $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 != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' and $input-skin-name != 'fluent2' {
       border-color: $input-group-border-color-hover;
     }
   }
@@ -1454,7 +1481,7 @@
   .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border-color: $outline-hover-border-color;
       color: $outline-hover-font-color;
     }
@@ -1468,7 +1495,7 @@
   .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'fluent2' {
+    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border-bottom-color: $underline-hover-border-color;
       color: $outline-hover-font-color;
     }
@@ -1852,7 +1879,7 @@
   .e-filled.e-float-input.e-input-group,
   .e-filled.e-float-input.e-control-wrapper,
   .e-filled.e-float-input.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' {
       background: $filled-input-bg-color;
       transition: $background-color-transition;
     }
@@ -1864,7 +1891,7 @@
   .e-filled.e-float-input.e-input-group:hover,
   .e-filled.e-float-input.e-control-wrapper:hover,
   .e-filled.e-float-input.e-input-group.e-control-wrapper: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' {
       background: $filled-input-overlay-focused-bg-color;
       transition: $background-color-transition;
     }
@@ -1882,7 +1909,7 @@
   .e-filled.e-float-input:hover.e-input-group.e-input-focus,
   .e-filled.e-float-input:hover.e-control-wrapper.e-input-focus,
   .e-filled.e-float-input:hover.e-input-group.e-control-wrapper.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' {
       background: $filled-input-overlay-activated-bg-color;
       transition: $background-color-transition;
     }
@@ -1918,7 +1945,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
   .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).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-color: $filled-input-hover-border-color;
     }
   }
@@ -1927,7 +1954,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
   .e-filled.e-float-input:not(.e-success):not(.e-warning):not(.e-error),
   .e-filled.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-color: $input-group-full-border-color;
     }
   }
@@ -1936,7 +1963,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-success,
   .e-filled.e-input-group.e-float-icon-left.e-success,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-success {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-state-color ($input-success-color);
     }
   }
@@ -1945,7 +1972,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-warning,
   .e-filled.e-input-group.e-float-icon-left.e-warning,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-warning {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-state-color ($input-warning-color);
     }
   }
@@ -1954,7 +1981,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-error,
   .e-filled.e-input-group.e-float-icon-left.e-error,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-error {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-state-color ($input-error-color);
     }
   }
@@ -2013,7 +2040,7 @@
   .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder,
   textarea.e-filled.e-input#{$css}:-ms-input-placeholder,
   .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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;
     }
   }
@@ -2026,7 +2053,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.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-error-color;
     }
   }
@@ -2084,7 +2111,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-float-text.e-label-top,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.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;
     }
   }
@@ -2130,7 +2157,7 @@
   .e-small .e-filled.e-float-input.e-warning input[disabled] ~ label.e-float-text.e-label-top,
   .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.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;
     }
   }
@@ -2214,7 +2241,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
   .e-small .e-filled.e-float-input.e-control-wrapper: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-float-label-color;
     }
   }
@@ -2259,7 +2286,7 @@
   .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:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper: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;
     }
   }
@@ -2268,7 +2295,7 @@
   .e-input-group textarea.e-input:-moz-placeholder,
   .e-input-group .e-input:-ms-input-placeholder,
   input.e-input#{$css}::-webkit-input-placeholder {
-    @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' {
       color: $input-placeholder-color;
     }
   }
@@ -2277,7 +2304,7 @@
   .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
   .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:hover,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon: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' {
       color: $filled-input-clear-icon-hover-color;
     }
   }
@@ -2286,7 +2313,7 @@
   .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
   .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:active,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-clear-icon-active-color;
     }
   }
@@ -2311,7 +2338,7 @@
       border-color: $filled-input-disabled-border-color;
       color: $filled-input-disabled-font-color;
     }
-    @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' {
       //background: $filled-input-disabled-bg-color;
       background-image: none;
       background-position: initial;
@@ -2324,7 +2351,7 @@
 
   .e-filled.e-float-input.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
   .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $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-color: $filled-input-disabled-border-color;
     }
   }
@@ -2333,7 +2360,7 @@
   .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .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' {
       background: $filled-input-disabled-bg-color;
       background-image: none;
       background-position: initial;
@@ -2426,7 +2453,7 @@
   .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
   .e-filled.e-float-input:not(.e-disabled) textarea[disabled],
   .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) textarea[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' {
       color: $filled-input-disabled-font-color;
     }
   }
@@ -2499,7 +2526,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-small.e-filled.e-float-input.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;
     }
   }
@@ -2584,7 +2611,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-small.e-filled.e-float-input.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;
     }
   }