Introduce :user-valid & :user-invalid variants

See https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid and https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
tailwindlabs · Nov 7, 2023 · 6b4dc07 · 6b4dc07
1 parent 0b7f27c
commit 6b4dc07
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -118,6 +118,8 @@ export let variantPlugins = {
       'required',
       'valid',
       'invalid',
+      'user-valid',
+      'user-invalid',
       'in-range',
       'out-of-range',
       'read-only',

diff --git a/tests/variants.test.css b/tests/variants.test.css
@@ -206,6 +206,8 @@
 .required\:flex:required,
 .valid\:flex:valid,
 .invalid\:flex:invalid,
+.user-valid\:flex:user-valid,
+.user-invalid\:flex:user-invalid,
 .in-range\:flex:in-range,
 .out-of-range\:flex:out-of-range,
 .read-only\:flex:read-only,
@@ -258,6 +260,8 @@
 .group:required .group-required\:flex,
 .group:valid .group-valid\:flex,
 .group:invalid .group-invalid\:flex,
+.group:user-valid .group-user-valid\:flex,
+.group:user-invalid .group-user-invalid\:flex,
 .group:in-range .group-in-range\:flex,
 .group:out-of-range .group-out-of-range\:flex,
 .group:read-only .group-read-only\:flex,
@@ -305,6 +309,8 @@
 .peer:required ~ .peer-required\:flex,
 .peer:valid ~ .peer-valid\:flex,
 .peer:invalid ~ .peer-invalid\:flex,
+.peer:user-valid ~ .peer-user-valid\:flex,
+.peer:user-invalid ~ .peer-user-invalid\:flex,
 .peer:in-range ~ .peer-in-range\:flex,
 .peer:out-of-range ~ .peer-out-of-range\:flex,
 .peer:read-only ~ .peer-read-only\:flex,

diff --git a/tests/variants.test.html b/tests/variants.test.html
@@ -26,6 +26,8 @@
 <div class="required:flex"></div>
 <div class="valid:flex"></div>
 <div class="invalid:flex"></div>
+<div class="user-valid:flex"></div>
+<div class="user-invalid:flex"></div>
 <div class="in-range:flex"></div>
 <div class="out-of-range:flex"></div>
 <div class="read-only:flex"></div>
@@ -72,6 +74,8 @@
 <div class="group-required:flex"></div>
 <div class="group-valid:flex"></div>
 <div class="group-invalid:flex"></div>
+<div class="group-user-valid:flex"></div>
+<div class="group-user-invalid:flex"></div>
 <div class="group-in-range:flex"></div>
 <div class="group-out-of-range:flex"></div>
 <div class="group-read-only:flex"></div>
@@ -105,6 +109,8 @@
 <div class="peer-required:flex"></div>
 <div class="peer-valid:flex"></div>
 <div class="peer-invalid:flex"></div>
+<div class="peer-user-valid:flex"></div>
+<div class="peer-user-invalid:flex"></div>
 <div class="peer-in-range:flex"></div>
 <div class="peer-out-of-range:flex"></div>
 <div class="peer-read-only:flex"></div>