From 06cb28d2bd97ddfec2d48ebb30909560a89e4889 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 27 Oct 2021 10:21:02 -0400
Subject: [PATCH] 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           | 4 ++++
 src/lib/setupContextUtils.js | 1 +
 tests/variants.test.css      | 6 ++++++
 tests/variants.test.html     | 3 +++
 4 files changed, 14 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 913f4226524c..dfded40111ce 100644
--- a/src/corePlugins.js
+++ b/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]
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index af46b912a408..2701adb9a3a2 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -573,6 +573,7 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['darkVariants'],
+    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
   ]
 
diff --git a/tests/variants.test.css b/tests/variants.test.css
index bb9a0faadbcb..6a13403f1640 100644
--- a/tests/variants.test.css
+++ b/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);
diff --git a/tests/variants.test.html b/tests/variants.test.html
index d28f5acb6014..8a671fe235a2 100644
--- a/tests/variants.test.html
+++ b/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>