Add PostCSS constrain utilities

dist/tailwind.css

@@ -491,6 +491,42 @@ body {
   border-color: #fdf2f5;
 }
 
+.constrain-xs {
+  max-width: 20rem;
+}
+
+.constrain-sm {
+  max-width: 30rem;
+}
+
+.constrain-md {
+  max-width: 40rem;
+}
+
+.constrain-lg {
+  max-width: 50rem;
+}
+
+.constrain-xl {
+  max-width: 60rem;
+}
+
+.constrain-2xl {
+  max-width: 70rem;
+}
+
+.constrain-3xl {
+  max-width: 80rem;
+}
+
+.constrain-4xl {
+  max-width: 90rem;
+}
+
+.constrain-5xl {
+  max-width: 100rem;
+}
+
 .shadow-1 {
   box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
 }
@@ -1128,6 +1164,42 @@ body {
     border-color: #fdf2f5;
   }
 
+  .sm\:constrain-xs {
+    max-width: 20rem;
+  }
+
+  .sm\:constrain-sm {
+    max-width: 30rem;
+  }
+
+  .sm\:constrain-md {
+    max-width: 40rem;
+  }
+
+  .sm\:constrain-lg {
+    max-width: 50rem;
+  }
+
+  .sm\:constrain-xl {
+    max-width: 60rem;
+  }
+
+  .sm\:constrain-2xl {
+    max-width: 70rem;
+  }
+
+  .sm\:constrain-3xl {
+    max-width: 80rem;
+  }
+
+  .sm\:constrain-4xl {
+    max-width: 90rem;
+  }
+
+  .sm\:constrain-5xl {
+    max-width: 100rem;
+  }
+
   .sm\:shadow-1 {
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
   }
@@ -1766,6 +1838,42 @@ body {
     border-color: #fdf2f5;
   }
 
+  .md\:constrain-xs {
+    max-width: 20rem;
+  }
+
+  .md\:constrain-sm {
+    max-width: 30rem;
+  }
+
+  .md\:constrain-md {
+    max-width: 40rem;
+  }
+
+  .md\:constrain-lg {
+    max-width: 50rem;
+  }
+
+  .md\:constrain-xl {
+    max-width: 60rem;
+  }
+
+  .md\:constrain-2xl {
+    max-width: 70rem;
+  }
+
+  .md\:constrain-3xl {
+    max-width: 80rem;
+  }
+
+  .md\:constrain-4xl {
+    max-width: 90rem;
+  }
+
+  .md\:constrain-5xl {
+    max-width: 100rem;
+  }
+
   .md\:shadow-1 {
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
   }
@@ -2404,6 +2512,42 @@ body {
     border-color: #fdf2f5;
   }
 
+  .lg\:constrain-xs {
+    max-width: 20rem;
+  }
+
+  .lg\:constrain-sm {
+    max-width: 30rem;
+  }
+
+  .lg\:constrain-md {
+    max-width: 40rem;
+  }
+
+  .lg\:constrain-lg {
+    max-width: 50rem;
+  }
+
+  .lg\:constrain-xl {
+    max-width: 60rem;
+  }
+
+  .lg\:constrain-2xl {
+    max-width: 70rem;
+  }
+
+  .lg\:constrain-3xl {
+    max-width: 80rem;
+  }
+
+  .lg\:constrain-4xl {
+    max-width: 90rem;
+  }
+
+  .lg\:constrain-5xl {
+    max-width: 100rem;
+  }
+
   .lg\:shadow-1 {
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
   }
@@ -3042,6 +3186,42 @@ body {
     border-color: #fdf2f5;
   }
 
+  .xl\:constrain-xs {
+    max-width: 20rem;
+  }
+
+  .xl\:constrain-sm {
+    max-width: 30rem;
+  }
+
+  .xl\:constrain-md {
+    max-width: 40rem;
+  }
+
+  .xl\:constrain-lg {
+    max-width: 50rem;
+  }
+
+  .xl\:constrain-xl {
+    max-width: 60rem;
+  }
+
+  .xl\:constrain-2xl {
+    max-width: 70rem;
+  }
+
+  .xl\:constrain-3xl {
+    max-width: 80rem;
+  }
+
+  .xl\:constrain-4xl {
+    max-width: 90rem;
+  }
+
+  .xl\:constrain-5xl {
+    max-width: 100rem;
+  }
+
   .xl\:shadow-1 {
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
   }

src/defaultConfig.js

@@ -165,6 +165,17 @@ export default {
       'pink-lightest',
     ]
   },
+  constrain: {
+    'xs': '20rem',
+    'sm': '30rem',
+    'md': '40rem',
+    'lg': '50rem',
+    'xl': '60rem',
+    '2xl': '70rem',
+    '3xl': '80rem',
+    '4xl': '90rem',
+    '5xl': '100rem',
+  },
   shadows: {
     '1': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
     '2': '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',

src/generators/constrain.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function ({ constrain }) {
+  return _.map(constrain, (size, className) => {
+    return defineClass(`constrain-${className}`, {
+      maxWidth: size,
+    })
+  })
+}

src/lib/generateUtilities.js

@@ -4,6 +4,7 @@ import backgroundColors from '../generators/backgroundColors'
 import backgroundSize from '../generators/backgroundSize'
 import borderWidths from '../generators/borderWidths'
 import borderColors from '../generators/borderColors'
+import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
 
@@ -16,6 +17,7 @@ export default function(options) {
           backgroundSize(options),
           borderWidths(options),
           borderColors(options),
+          constrain(options),
           shadows(options),
           flex(options),
         ])