diff --git a/src/internal/_generator.scss b/src/internal/_generator.scss
index 3634dea0..171358ae 100644
--- a/src/internal/_generator.scss
+++ b/src/internal/_generator.scss
@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:map';
 @use 'config';
 @use 'size';
 @use 'mixins';
@@ -12,6 +13,7 @@ $default-variant-delimiter: '\\:';
 @mixin utility(
     $prefix: $default-prefix,
     $delimiter: $default-delimiter,
+    $common-class-name,
     $class-value-pairs,
     $variants: (),
     $variant-delimiter: $default-variant-delimiter,
@@ -20,14 +22,21 @@ $default-variant-delimiter: '\\:';
 ) {
     @include utility-with-body(
             $prefix,
+            $common-class-name,
             $class-value-pairs,
             $variants,
             $variant-delimiter,
             $generate-viewports,
             $override
         )
-        using ($variant, $variant-delimiter, $prefix, $suffix, $key, $value, $override) {
+        using ($variant, $variant-delimiter, $prefix, $suffix, $common-class-name, $key, $value, $override) {
         // TODO Handle portrait and landscape
+
+        $common-class: $common-class-name + $delimiter;
+        @if $common-class-name == '' {
+            $common-class: '';
+        }
+
         @if $variant == 'dark' or $variant == 'light' {
             $variant-prefix: '';
             $variant-suffix: '';
@@ -41,7 +50,7 @@ $default-variant-delimiter: '\\:';
             }
 
             @media (prefers-color-scheme: #{$variant}) {
-                .#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str} {
+                .#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str} {
                     @include mixins.explode-properties($value, $override);
                 }
             }
@@ -58,7 +67,7 @@ $default-variant-delimiter: '\\:';
             }
 
             @media (prefers-reduced-motion: reduce) {
-                .#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str} {
+                .#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str} {
                     @include mixins.explode-properties($value, $override);
                 }
             }
@@ -75,7 +84,7 @@ $default-variant-delimiter: '\\:';
                 $suffix-str: $delimiter + $suffix;
             }
 
-            .#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str}#{$variant-suffix} {
+            .#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str}#{$variant-suffix} {
                 @include mixins.explode-properties($value, $override);
             }
         }
@@ -84,6 +93,7 @@ $default-variant-delimiter: '\\:';
 
 @mixin utility-with-body(
     $prefix: $default-prefix,
+    $common-class-name,
     $class-value-pairs,
     $variants: (),
     $variant-delimiter: $default-variant-delimiter,
@@ -95,16 +105,32 @@ $default-variant-delimiter: '\\:';
     @each $key, $value in $class-value-pairs {
         @each $variant in $variants {
             // No viewport
-            @content ($variant, $variant-delimiter, $prefix, '', $key, $value, $override);
+            @content ($variant, $variant-delimiter, $prefix, '', $common-class-name, $key, $value, $override);
 
             // Generate classes with viewport
             @if $generate-viewports == 'true' {
                 @each $suffix, $limit in config.$breakpoint-pairs {
                     @include size.screen-above($limit) {
-                        @content ($variant, $variant-delimiter, $prefix, $suffix, $key, $value, $override);
+                        @content ($variant, $variant-delimiter, $prefix, $suffix, $common-class-name, $key, $value, $override);
                     }
                 }
             }
         }
     }
 }
+
+@function class-value-map-with-single-property($property, $property-values) {
+    $result: ();
+
+    @each $key, $value in $property-values {
+        $result: map.set(
+            $result,
+            $key,
+            (
+                $property: $value,
+            )
+        );
+    }
+
+    @return $result;
+}
\ No newline at end of file
diff --git a/tests/internal/_generator.spec.scss b/tests/internal/_generator.spec.scss
index f436aee9..e0004c7c 100644
--- a/tests/internal/_generator.spec.scss
+++ b/tests/internal/_generator.spec.scss
@@ -9,6 +9,7 @@
         @include assert {
             @include output {
                 @include generator.utility(
+                    $common-class-name: 'text',
                     $class-value-pairs: (
                         'blue': (
                             'color': blue,
@@ -24,117 +25,117 @@
                 );
             }
             @include expect {
-                .u-blue {
+                .u-text-blue {
                     color: blue !important;
                 }
 
                 @media screen and (min-width: 640px) {
-                    .u-blue-sm {
+                    .u-text-blue-sm {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 768px) {
-                    .u-blue-md {
+                    .u-text-blue-md {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1024px) {
-                    .u-blue-lg {
+                    .u-text-blue-lg {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1280px) {
-                    .u-blue-xl {
+                    .u-text-blue-xl {
                         color: blue !important;
                     }
                 }
 
-                .hover\:u-blue:hover {
+                .hover\:u-text-blue:hover {
                     color: blue !important;
                 }
 
                 @media screen and (min-width: 640px) {
-                    .hover\:u-blue-sm:hover {
+                    .hover\:u-text-blue-sm:hover {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 768px) {
-                    .hover\:u-blue-md:hover {
+                    .hover\:u-text-blue-md:hover {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1024px) {
-                    .hover\:u-blue-lg:hover {
+                    .hover\:u-text-blue-lg:hover {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1280px) {
-                    .hover\:u-blue-xl:hover {
+                    .hover\:u-text-blue-xl:hover {
                         color: blue !important;
                     }
                 }
                 @media (prefers-color-scheme: dark) {
-                    .dark\:u-blue {
+                    .dark\:u-text-blue {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
-                    .dark\:u-blue-sm {
+                    .dark\:u-text-blue-sm {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
-                    .dark\:u-blue-md {
+                    .dark\:u-text-blue-md {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1024px) and (prefers-color-scheme: dark) {
-                    .dark\:u-blue-lg {
+                    .dark\:u-text-blue-lg {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
-                    .dark\:u-blue-xl {
+                    .dark\:u-text-blue-xl {
                         color: blue !important;
                     }
                 }
 
                 @media (prefers-reduced-motion: reduce) {
-                    .reduce-motion\:u-blue {
+                    .reduce-motion\:u-text-blue {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
-                    .reduce-motion\:u-blue-sm {
+                    .reduce-motion\:u-text-blue-sm {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
-                    .reduce-motion\:u-blue-md {
+                    .reduce-motion\:u-text-blue-md {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
-                    .reduce-motion\:u-blue-lg {
+                    .reduce-motion\:u-text-blue-lg {
                         color: blue !important;
                     }
                 }
 
                 @media screen and (min-width: 1280px) and (prefers-reduced-motion: reduce) {
-                    .reduce-motion\:u-blue-xl {
+                    .reduce-motion\:u-text-blue-xl {
                         color: blue !important;
                     }
                 }