Bootstrap 4 - SCSS - extra tailwind like utilities

bs4_extra_utility.scss

/*
  - output =>
    - normal class like: `font-sm`, `font-base`, `font-md`...etc
    - responsive class like: `font-sm-sm`, `font-md-sm`, `font-lg-sm`...etc
*/
// * `$font-size-base` is from bs4 variable.
$custom-font-size-base: $font-size-base;

// * font-size map. It's OK to revise here directly.
$custom-font-sizes: (
    sm: 0.75rem,
    base: 1rem,
    md: 1.5rem,
    lg: 1.75rem,
    xl: 2rem,
    2xl: 2.25rem,
    3xl: 2.5rem,
    4xl: 2.75rem,
    5xl: 3rem,
) !default;

@each $custom-font-name, $custom-font-size in $custom-font-sizes {
    .font-#{$custom-font-name} {
        font-size: $custom-font-size;
    }
}

// * bootstrap grid breakpoint mixin is required. Please make sure it's included before this section.
@each $breakpoint, $grid-breakpoint in $grid-breakpoints {
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        @each $custom-font-name, $custom-font-size in $custom-font-sizes {
            .font-#{$breakpoint}-#{$custom-font-name} {
                font-size: $custom-font-size;
            }
        }
    }
}

/*
  z-index
  eg: `.z-1`, `.z-2`, `.z-3`...
*/
$custom-z-index: map-merge(
    (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
    ),
    $custom-z-index
);

@each $index-name, $index-value in $custom-z-index {
    .z-#{$index-name} {
        z-index: #{$index-value};
    }
}

/*
  space-between, breakpoint is also support!
  eg: `.space-x-10`, `.space-x-md-10`, `.space-x-reverse`
*/
@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        @each $size, $length in $spacers {
            .space-y#{$infix}-#{$size} {
                & > :not([hidden]) ~ :not([hidden]) {
                    margin-top: $length !important;
                }
            }
            .space-x#{$infix}-#{$size} {
                & > :not([hidden]) ~ :not([hidden]) {
                    margin-left: $length !important;
                }
            }
            .space-y#{$infix}-#{$size}.space-y-reverse {
                & > :not([hidden]) ~ :not([hidden]) {
                    margin-top: 0 !important;
                    margin-bottom: $length !important;
                }
            }
            .space-x#{$infix}-#{$size}.space-x-reverse {
                & > :not([hidden]) ~ :not([hidden]) {
                    margin-left: 0 !important;
                    margin-right: $length !important;
                }
            }
        }
    }
}