Merge pull request tailwindlabs#1284 from tailwindcss/max-w-screen

Add `max-w-screen-{breakpoint}` utilities

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -5117,6 +5117,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;
 }
@@ -14451,6 +14467,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;
   }
@@ -23786,6 +23818,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;
   }
@@ -33121,6 +33169,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;
   }
@@ -42456,6 +42520,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;
   }

__tests__/fixtures/tailwind-output.css

@@ -5117,6 +5117,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;
 }
@@ -14451,6 +14467,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;
   }
@@ -23786,6 +23818,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;
   }
@@ -33121,6 +33169,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;
   }
@@ -42456,6 +42520,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;
   }

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) {

stubs/defaultConfig.stub.js

@@ -302,19 +302,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',