Add enabled variant (#7905)

* Add enabled variant

* Update changelog

Author: adamwathan

CHANGELOG.md

@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
 - Add `--poll` option to the CLI ([#7725](https://github.com/tailwindlabs/tailwindcss/pull/7725))
 - Add new `border-spacing` utilities ([#7102](https://github.com/tailwindlabs/tailwindcss/pull/7102))
+- Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
 - Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
 
 ## [3.0.23] - 2022-02-16

src/corePlugins.js

@@ -118,6 +118,7 @@ export let variantPlugins = {
       'focus',
       'focus-visible',
       'active',
+      'enabled',
       'disabled',
     ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
 

tests/variants.test.css

@@ -313,6 +313,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.enabled\:shadow-md:enabled {
+  --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);
+}
 .disabled\:shadow-md:disabled {
   --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);
@@ -500,6 +506,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.group:enabled .group-enabled\: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:disabled .group-disabled\: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);
@@ -687,6 +699,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.peer:enabled ~ .peer-enabled\: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:disabled ~ .peer-disabled\: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

@@ -19,6 +19,7 @@
     <div class="only-of-type:shadow-md"></div>
     <div class="hover:shadow-md"></div>
     <div class="focus:shadow-md"></div>
+    <div class="enabled:shadow-md"></div>
     <div class="disabled:shadow-md"></div>
     <div class="active:shadow-md"></div>
     <div class="target:shadow-md"></div>
@@ -40,10 +41,10 @@
     <div class="empty:shadow-md"></div>
 
     <!-- Pseudo-element variants -->
-    <div class="first-letter:text-red-500 first-letter:text-2xl"></div>
-    <div class="first-line:underline first-line:bg-yellow-300"></div>
+    <div class="first-letter:text-2xl first-letter:text-red-500"></div>
+    <div class="first-line:bg-yellow-300 first-line:underline"></div>
     <ul>
-      <li class="marker:text-red-500 marker:text-lg"></li>
+      <li class="marker:text-lg marker:text-red-500"></li>
     </ul>
     <div class="selection:bg-blue-500 selection:text-white"></div>
     <div class="file:bg-blue-500 file:text-white"></div>
@@ -63,6 +64,7 @@
     <div class="group-only-of-type:shadow-md"></div>
     <div class="group-hover:shadow-md"></div>
     <div class="group-focus:shadow-md"></div>
+    <div class="group-enabled:shadow-md"></div>
     <div class="group-disabled:shadow-md"></div>
     <div class="group-active:shadow-md"></div>
     <div class="group-target:shadow-md"></div>
@@ -93,6 +95,7 @@
     <div class="peer-only-of-type:shadow-md"></div>
     <div class="peer-hover:shadow-md"></div>
     <div class="peer-focus:shadow-md"></div>
+    <div class="peer-enabled:shadow-md"></div>
     <div class="peer-disabled:shadow-md"></div>
     <div class="peer-active:shadow-md"></div>
     <div class="peer-target:shadow-md"></div>