diff --git a/src/generators.less b/src/generators.less
index 0d4788d09..8f6d10dd1 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -25,6 +25,8 @@
 
 @import "generators/border-colors";
 
+@import "generators/constrain";
+
 @import "generators/text-colors";
 @import "generators/text-weights";
 @import "generators/text-sizes";
diff --git a/src/generators/constrain.less b/src/generators/constrain.less
new file mode 100644
index 000000000..4428deb3e
--- /dev/null
+++ b/src/generators/constrain.less
@@ -0,0 +1,26 @@
+.generate-constrain-utility(@variant; @size) {
+  .define-selector(~"constrain-@{variant}"; {
+    max-width: @size;
+    flex-basis: @size;
+  });
+}
+
+.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
+  @name: extract(@size-variants, 1);
+  @size: extract(@size-variants, 2);
+
+  .generate-constrain-utility(@name; @size);
+}
+
+.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
+  @variant: extract(@size-variants, @i);
+  @name: extract(@variant, 1);
+  @size: extract(@variant, 2);
+
+  .generate-constrain-utility(@name; @size);
+  .generate-constrain-utilities(@size-variants; @i + 1);
+}
+
+.define-constrains(@size-variants) {
+    .generate-constrain-utilities(@size-variants);
+}
diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less
index b6874ceba..c78ddc7b1 100644
--- a/src/utilities/constrain.less
+++ b/src/utilities/constrain.less
@@ -8,15 +8,18 @@
 @constrain-4xl: 90rem;
 @constrain-5xl: 100rem;
 
-.constrain-xs { max-width: @constrain-xs; flex-basis: @constrain-xs; }
-.constrain-sm { max-width: @constrain-sm; flex-basis: @constrain-sm; }
-.constrain-md { max-width: @constrain-md; flex-basis: @constrain-md; }
-.constrain-lg { max-width: @constrain-lg; flex-basis: @constrain-lg; }
-.constrain-xl { max-width: @constrain-xl; flex-basis: @constrain-xl; }
-.constrain-2xl { max-width: @constrain-2xl; flex-basis: @constrain-2xl; }
-.constrain-3xl { max-width: @constrain-3xl; flex-basis: @constrain-3xl; }
-.constrain-4xl { max-width: @constrain-4xl; flex-basis: @constrain-4xl; }
-.constrain-5xl { max-width: @constrain-5xl; flex-basis: @constrain-5xl; }
+@constrain-scale:
+  'xs' @constrain-xs,
+  'sm' @constrain-sm,
+  'md' @constrain-md,
+  'lg' @constrain-lg,
+  'xl' @constrain-xl,
+  '2xl' @constrain-2xl,
+  '3xl' @constrain-3xl,
+  '4xl' @constrain-4xl,
+  '5xl' @constrain-5xl;
+
+.define-constrains(@constrain-scale);
 
 .responsive({
   &constrain-xs { .constrain-xs; }