Add print variant (#5885)

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

src/corePlugins.js

@@ -150,6 +150,10 @@ export let variantPlugins = {
     }
   },
 
+  printVariant: ({ addVariant }) => {
+    addVariant('print', '@media print')
+  },
+
   screenVariants: ({ theme, addVariant }) => {
     for (let screen in theme('screens')) {
       let size = theme('screens')[screen]

src/lib/setupContextUtils.js

@@ -573,6 +573,7 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['darkVariants'],
+    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
   ]
 

tests/variants.test.css

@@ -709,6 +709,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+@media print {
+  .print\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+      background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
 @media (min-width: 640px) {
   .sm\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);

tests/variants.test.html

@@ -122,6 +122,9 @@
     <!-- Dark mode variants -->
     <div class="dark:shadow-md"></div>
 
+    <!-- Print variant -->
+    <div class="print:bg-yellow-300"></div>
+
     <!-- Screen variants -->
     <div class="sm:shadow-md"></div>
     <div class="md:shadow-md"></div>