From fca70850b2985c0c8add440522f9f2da68c13392 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 1 Jun 2022 08:39:43 -0400
Subject: [PATCH] Add `optional` variant (#8486)

* Add  variant

* Update changelog
---
 CHANGELOG.md             |  1 +
 src/corePlugins.js       |  1 +
 tests/variants.test.css  | 18 ++++++++++++++++++
 tests/variants.test.html |  3 +++
 4 files changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b652ce3c936d..60a0c664f4ee 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index f20741605612..aaf6fcdb45b1 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -105,6 +105,7 @@ export let variantPlugins = {
       'indeterminate',
       'placeholder-shown',
       'autofill',
+      'optional',
       'required',
       'valid',
       'invalid',
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 6be36b29042f..8dbd9df00270 100644
--- a/tests/variants.test.css
+++ b/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);
diff --git a/tests/variants.test.html b/tests/variants.test.html
index c84c5da5c92a..47d1af9e5999 100644
--- a/tests/variants.test.html
+++ b/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>