Fixing common error states

README.md

@@ -15,7 +15,6 @@ https://erimicel.github.io/select2-tailwindcss-theme/
 ## Current issues to be fixed
 
 - [ ] Prepend and Append Styles
-- [ ] Error state
 - [ ] Fix height of multi select box
 
 ## 📦 Installation

dist/select2-tailwindcss-theme-plain.css

@@ -199,6 +199,19 @@
   content: ""
 }
 
+/* Error states */
+.field_with_errors .select2-container--tailwindcss-3 .select2-selection,
+select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
+select:invalid ~ .select2-container--tailwindcss-3 .select2-selection{
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))
+}
+
 /* Single Selection */
 .select2-container--tailwindcss-3 .select2-selection--single{
   position: relative;
@@ -314,17 +327,6 @@
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))
 }
 
-/* Error state */
-.select2-container--tailwindcss-3.select2-container--error .select2-selection--single{
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))
-}
-
 /* RTL Support */
 .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{
   padding-left: 2.5rem;
@@ -468,14 +470,3 @@
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))
 }
-
-/* Error state */
-.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple{
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))
-}

dist/select2-tailwindcss-theme.css

@@ -70,6 +70,13 @@
   content: "";
 }
 
+/* Error states */
+.field_with_errors .select2-container--tailwindcss-3 .select2-selection,
+select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
+select:invalid ~ .select2-container--tailwindcss-3 .select2-selection {
+  @apply border-red-500 ring-1 ring-red-500;
+}
+
 /* Single Selection */
 .select2-container--tailwindcss-3 .select2-selection--single {
   @apply relative w-full h-9 py-1.5 pl-3 pr-8 text-left transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm;
@@ -114,11 +121,6 @@
   @apply border-blue-500 ring-1 ring-blue-500;
 }
 
-/* Error state */
-.select2-container--tailwindcss-3.select2-container--error .select2-selection--single {
-  @apply border-red-500 ring-1 ring-red-500;
-}
-
 /* RTL Support */
 .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered {
   @apply pl-10 pr-3;
@@ -168,8 +170,3 @@
 .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple {
   @apply border-blue-500 ring-1 ring-blue-500;
 }
-
-/* Error state */
-.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple {
-  @apply border-red-500 ring-1 ring-red-500;
-}