From 038b158e28e0b0fba223813722ecee63256ae5f5 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 27 Dec 2019 08:53:47 -0500
Subject: [PATCH] Add `max-w-screen-{breakpoint}` utilities

---
 .../fixtures/tailwind-output-important.css    | 80 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 80 +++++++++++++++++++
 src/util/resolveConfig.js                     | 11 +++
 stubs/defaultConfig.stub.js                   | 29 ++++---
 4 files changed, 187 insertions(+), 13 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 14eb3e022e51..a59f60d2e9b0 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -5057,6 +5057,22 @@ video {
   max-width: 100% !important;
 }
 
+.max-w-screen-sm {
+  max-width: 640px !important;
+}
+
+.max-w-screen-md {
+  max-width: 768px !important;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px !important;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px !important;
+}
+
 .min-h-0 {
   min-height: 0 !important;
 }
@@ -14331,6 +14347,22 @@ video {
     max-width: 100% !important;
   }
 
+  .sm\:max-w-screen-sm {
+    max-width: 640px !important;
+  }
+
+  .sm\:max-w-screen-md {
+    max-width: 768px !important;
+  }
+
+  .sm\:max-w-screen-lg {
+    max-width: 1024px !important;
+  }
+
+  .sm\:max-w-screen-xl {
+    max-width: 1280px !important;
+  }
+
   .sm\:min-h-0 {
     min-height: 0 !important;
   }
@@ -23606,6 +23638,22 @@ video {
     max-width: 100% !important;
   }
 
+  .md\:max-w-screen-sm {
+    max-width: 640px !important;
+  }
+
+  .md\:max-w-screen-md {
+    max-width: 768px !important;
+  }
+
+  .md\:max-w-screen-lg {
+    max-width: 1024px !important;
+  }
+
+  .md\:max-w-screen-xl {
+    max-width: 1280px !important;
+  }
+
   .md\:min-h-0 {
     min-height: 0 !important;
   }
@@ -32881,6 +32929,22 @@ video {
     max-width: 100% !important;
   }
 
+  .lg\:max-w-screen-sm {
+    max-width: 640px !important;
+  }
+
+  .lg\:max-w-screen-md {
+    max-width: 768px !important;
+  }
+
+  .lg\:max-w-screen-lg {
+    max-width: 1024px !important;
+  }
+
+  .lg\:max-w-screen-xl {
+    max-width: 1280px !important;
+  }
+
   .lg\:min-h-0 {
     min-height: 0 !important;
   }
@@ -42156,6 +42220,22 @@ video {
     max-width: 100% !important;
   }
 
+  .xl\:max-w-screen-sm {
+    max-width: 640px !important;
+  }
+
+  .xl\:max-w-screen-md {
+    max-width: 768px !important;
+  }
+
+  .xl\:max-w-screen-lg {
+    max-width: 1024px !important;
+  }
+
+  .xl\:max-w-screen-xl {
+    max-width: 1280px !important;
+  }
+
   .xl\:min-h-0 {
     min-height: 0 !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 7421d2806fac..ad1843c5ec01 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -5057,6 +5057,22 @@ video {
   max-width: 100%;
 }
 
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
 .min-h-0 {
   min-height: 0;
 }
@@ -14331,6 +14347,22 @@ video {
     max-width: 100%;
   }
 
+  .sm\:max-w-screen-sm {
+    max-width: 640px;
+  }
+
+  .sm\:max-w-screen-md {
+    max-width: 768px;
+  }
+
+  .sm\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .sm\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+
   .sm\:min-h-0 {
     min-height: 0;
   }
@@ -23606,6 +23638,22 @@ video {
     max-width: 100%;
   }
 
+  .md\:max-w-screen-sm {
+    max-width: 640px;
+  }
+
+  .md\:max-w-screen-md {
+    max-width: 768px;
+  }
+
+  .md\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .md\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+
   .md\:min-h-0 {
     min-height: 0;
   }
@@ -32881,6 +32929,22 @@ video {
     max-width: 100%;
   }
 
+  .lg\:max-w-screen-sm {
+    max-width: 640px;
+  }
+
+  .lg\:max-w-screen-md {
+    max-width: 768px;
+  }
+
+  .lg\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .lg\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+
   .lg\:min-h-0 {
     min-height: 0;
   }
@@ -42156,6 +42220,22 @@ video {
     max-width: 100%;
   }
 
+  .xl\:max-w-screen-sm {
+    max-width: 640px;
+  }
+
+  .xl\:max-w-screen-md {
+    max-width: 768px;
+  }
+
+  .xl\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .xl\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+
   .xl\:min-h-0 {
     min-height: 0;
   }
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 7c43d72752bb..75dac0d41b4c 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -20,6 +20,17 @@ const configUtils = {
         {}
       )
   },
+  breakpoints(screens) {
+    return Object.keys(screens)
+      .filter(key => typeof screens[key] === 'string')
+      .reduce(
+        (breakpoints, key) => ({
+          ...breakpoints,
+          [`screen-${key}`]: screens[key],
+        }),
+        {}
+      )
+  },
 }
 
 function value(valueToResolve, ...args) {
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index ea2ed7103ca4..295b0c97779c 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -301,19 +301,22 @@ module.exports = {
       full: '100%',
       screen: '100vh',
     },
-    maxWidth: {
-      none: 'none',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      full: '100%',
+    maxWidth: (theme, { breakpoints }) => {
+      return {
+        none: 'none',
+        xs: '20rem',
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        '2xl': '42rem',
+        '3xl': '48rem',
+        '4xl': '56rem',
+        '5xl': '64rem',
+        '6xl': '72rem',
+        full: '100%',
+        ...breakpoints(theme('screens')),
+      }
     },
     minHeight: {
       '0': '0',