Utility-Class (like Bootstrap 5) buut.. in a simple way

utilities.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$utilities: (
  "text-[color]": (
    class: text,
    property: color,
    responsive: sm md,
    hover: secondary,
    group-hover: secondary,
    values: (
      primary: #007bff,
      secondary: #6c757d,
    ),
  ),
);


@function is-map($var){
  @return type-of($var) == 'map';
}

@each $key, $utility in $utilities {
  $_property: if(map-get($utility, 'property'), map-get($utility, 'property'), $key);
  $_class: if(map-get($utility, 'class'), map-get($utility, 'class'), $key);
  $_values: map-get($utility, 'values');
  $_responsive: map-get($utility, 'responsive');
  $_hover: map-get($utility, 'hover');
  $_group-hover: map-get($utility, 'group-hover');

  
  // values
  @each $key, $value in $_values {
    $_value: if($value, $value, $key);

    .#{$_class}-#{$key} {
      #{$_property}: $_value !important;
    }
  }
  
  // hover
  @if $_hover {
    @each $key in $_hover {
      $_value: if(is-map($_values), map-get($_values, $key), $key);
      
      .hover\:#{$_class}-#{$key}:hover {
        #{$_property}: $_value !important;
      }
    }
  }
  
  // group-hover
  @if($_group-hover){
    @each $group-value in $_group-hover {
      $_value: if(is-map($_values), map-get($_values, $group-value), $group-value);
      
      .group:hover .group-hover\:#{$_class}-#{$group-value}{
        #{$_property}: $_value !important;
      }
    }
  }
  
  
  // responsive
  @if $_responsive {
    @each $breakpoint in  $_responsive {
      $_breakpoint-width: map-get($grid-breakpoints, $breakpoint);
      @media (min-width:$_breakpoint-width) {
        // values
        @each $key, $value in $_values {
          $_value: if($value, $value, $key);
          
          .#{$breakpoint}\:#{$_class}-#{$key} {
            #{$_property}: $_value !important;
          }
        }
        
        // hover
        @if $_hover {
          @each $key in $_hover {
            $_value: if(is-map($_values), map-get($_values, $key), $key);
            
            .#{$breakpoint}\:hover\:#{$_class}-#{$key}:hover {
              #{$_property}: $_value !important;
            }
          }
        }
        
        // group-hover
        @if($_group-hover){
          @each $group-value in $_group-hover {
            $_value: if(is-map($_values), map-get($_values, $group-value), $group-value);
            
            .group:hover .#{$breakpoint}\:group-hover\:#{$_class}-#{$group-value}{
              #{$_property}: $_value !important;
            }
          }
        }
      }
    }
  }
}

// ==== OUT ==== \\ 
/*
.text-primary {
  color: #007bff !important;
}

.text-secondary {
  color: #6c757d !important;
}

.hover\:text-secondary:hover {
  color: #6c757d !important;
}

.group:hover .group-hover\:text-secondary {
  color: #6c757d !important;
}

@media (min-width: 768px) {
  .md\:text-primary {
    color: #007bff !important;
  }

  .md\:text-secondary {
    color: #6c757d !important;
  }

  .md\:hover\:text-secondary:hover {
    color: #6c757d !important;
  }

  .group:hover .md\:group-hover\:text-secondary {
    color: #6c757d !important;
  }
}
@media (min-width: 576px) {
  .sm\:text-primary {
    color: #007bff !important;
  }

  .sm\:text-secondary {
    color: #6c757d !important;
  }

  .sm\:hover\:text-secondary:hover {
    color: #6c757d !important;
  }

  .group:hover .sm\:group-hover\:text-secondary {
    color: #6c757d !important;
  }
}
*/

utilities_var.scss

$utilities: (
  // Format
  // ------
  // {breakpoint?hover?parent-hover?}-{key} {
  //   {property}: {value} !important;
  // }

  // -------
  // LAYOUT
  // -------
  "position-[variant]": (
    class: position,
    property: position,
    values: (
      relative: relative,
      absolute: absolute,
    ),
    responsive: sm,
  ),
  "top-[size]": (
    class: top,
    property: top,
    values: (
      none: none,
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
    ),
    responsive: sm,
  ),
  "right-[size]": (
    class: right,
    property: right,
    values: (
      none: none,
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
    ),
    responsive: sm,
  ),
  "bottom-[size]": (
    class: bottom,
    property: bottom,
    values: (
      none: none,
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
    )
  ),
  "left-[size]": (
    class: left,
    property: left,
    values: (
      none: none,
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      off: -4000rem,
    ),
    responsive: sm,
  ),

  // ------------
  // BACKGROUNDS
  // ------------
  "bg-[color]": (
    class: bg,
    property: background-color,
    values: (
      white: $white,
      grey-light: $color-text-grey-light,
      light-background: $color-light-background,
      blue-100: #e7f5f5,
    ),
    hover: light-background,
  ),
  "bg-[size]": (
    class: bg,
    property: background-size,
    values: (
      auto: auto,
      cover: cover,
      contain: contain,
    ),
  ),
  // --------
  // BORDERS
  // --------
  "border-[width]": (
    class: border,
    property: border-width,
    values: (
      0: 0,
    ),
  ),
  "border-[color]": (
    class: border,
    property: border-color,
    values: (
      grey-light: $color-light-grey-3-1,
      brand-wcag-3-1: $color-brand-wcag-3-1,
      color-z: rgba(1, 159, 163, 0.4),
    ),
    hover: brand-wcag-3-1,
  ),
  "rounded-[size]": (
    class: rounded,
    property: border-radius,
    values: (
      xl: 1rem,
    )
  ),
  // --------
  // SPACING
  // --------
  "ml-[size]": (
    class: ml,
    property: margin-left,
    values: (
      0: 0,
      1: 0.25rem,
      2: 0.5rem,
      3: 0.75rem,
    ),
    hover: 0 1 2 3,
    group-hover: 0 1 2 3,
  ),
  "mb-[size]": (
    class: mb,
    property: margin-bottom,
    values: (
      10: 2.50rem,
    ),
  ),
  // -------
  // SIZING
  // -------
  "w-[variant]": (
    class: w,
    property: width,
    values: (
      auto: auto,
      screen: 100vw,
      full: 100%,
      half: 50%,
      px: 1px,
      0: 0,
      1: 0.25rem, // 4px
      2: 0.5rem,  // 8px
      3: 0.75rem, // 12px
      4: 1rem,    // 16px
      5: 1.25rem, // 20px
      6: 1.5rem,  // 24px
      8: 2rem,    // 32px
      10: 2.5rem, // 40px
      12: 3rem,   // 48px
      16: 4rem,   // 64px
      20: 5rem,   // 80px
      perc-25: 25%,
      perc-33: 33.333333%,
      perc-50: 50%,
      perc-66: 66.666667%,
      perc-75: 75%,
    ),
  ),
  "h-[variant]": (
    class: h,
    property: height,
    values: (
      auto: auto,
      screen: 100vw,
      full: 100%,
      px: 1px,
      0: 0,
      1: 0.25rem, // 4px
      2: 0.5rem,  // 8px
      3: 0.75rem, // 12px
      4: 1rem,    // 16px
      5: 1.25rem, // 20px
      6: 1.5rem,  // 24px
      8: 2rem,    // 32px
      10: 2.5rem, // 40px
      12: 3rem,   // 48px
      16: 4rem,   // 64px
      20: 5rem,   // 80px
    ),
  ),
  // -----------
  // TYPOGRAPHY
  // -----------
  "text-[color]": (
    class: text,
    property: color,
    values: (
      black: $black,
      grey-light: $color-text-grey-light,
      light-grey-3-1: $color-light-grey-3-1,
      brand-text: $color-brand-text,
      brand-dark: $color-brand-dark,
    ),
    hover: brand-dark,
  ),
  "text-[font-size]": (
    class: text,
    property: font-size,
    values: (
      xs:0.75rem,
      sm:0.875rem,
      base:1rem,
      lg:1.125rem,
      xl:1.25rem,
      2xl:1.5rem,
      3xl:1.875rem,
      4xl:2.25rem,
      5xl:3rem,
      6xl:4rem,
    )
  ),
  "font-weight-[variant]": (
    class: font-weight,
    property: font-weight,
    values: (
      medium: 500,
    )
  ),
  "leading-[variant]": (
    class: leading,
    property: line-height,
    values: (
      none: 1,
      tight: 1.25,
      snug: 1.375,
      normal: 1.5,
    )
  ),
  "list-[variant]": (
    class: list,
    property: list-style-type,
    values: (
      none: none,
      disc: disc,
    )
  ),
  // -------------
  // TRANSITIONS
  // -------------
  "transition-[variation]": (
    class: transition,
    property: transition-property,
    values: (
      none: none,
      all: all,
      margin: margin,
    ),
  ),
  "duration-[variation]": (
    class: duration,
    property: transition-duration,
    values: (
      300: 300ms,
    ),
  ),
  // --------------
  // INTERACTIVITY
  // --------------
  "cursor": (
    class: cursor,
    property: cursor,
    values: default pointer not-allowed,
  )
);

You can check the code in https://www.sassmeister.com/