Add optional variant (#8486)

* Add  variant

* Update changelog

CHANGELOG.md

@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
 - Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
 - Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
+- Add `optional` variant ([#8486](https://github.com/tailwindlabs/tailwindcss/pull/8486))
 
 ## [3.0.24] - 2022-04-12
 

src/corePlugins.js

@@ -105,6 +105,7 @@ export let variantPlugins = {
       'indeterminate',
       'placeholder-shown',
       'autofill',
+      'optional',
       'required',
       'valid',
       'invalid',

tests/variants.test.css

@@ -225,6 +225,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.optional\:shadow-md:optional {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .required\:shadow-md:required {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -425,6 +431,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.group:optional .group-optional\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .group:required .group-required\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -627,6 +639,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.peer:optional ~ .peer-optional\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .peer:required ~ .peer-required\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

tests/variants.test.html

@@ -32,6 +32,7 @@
     <div class="autofill:shadow-md"></div>
     <div class="focus-within:shadow-md"></div>
     <div class="focus-visible:shadow-md"></div>
+    <div class="optional:shadow-md"></div>
     <div class="required:shadow-md"></div>
     <div class="valid:shadow-md"></div>
     <div class="invalid:shadow-md"></div>
@@ -77,6 +78,7 @@
     <div class="group-autofill:shadow-md"></div>
     <div class="group-focus-within:shadow-md"></div>
     <div class="group-focus-visible:shadow-md"></div>
+    <div class="group-optional:shadow-md"></div>
     <div class="group-required:shadow-md"></div>
     <div class="group-valid:shadow-md"></div>
     <div class="group-invalid:shadow-md"></div>
@@ -108,6 +110,7 @@
     <div class="peer-autofill:shadow-md"></div>
     <div class="peer-focus-within:shadow-md"></div>
     <div class="peer-focus-visible:shadow-md"></div>
+    <div class="peer-optional:shadow-md"></div>
     <div class="peer-required:shadow-md"></div>
     <div class="peer-valid:shadow-md"></div>
     <div class="peer-invalid:shadow-md"></div>