Generate Tailwind CSS style spacing helpers for margin and paddings

Tailwind Spacing Helpers.scss

// Generate Margin and Padding helpers similar to Tailwind CSS
// https://tailwindcss.com/docs/margin/
// https://tailwindcss.com/docs/padding/

// generated output CSS : https://gist.github.com/geongeorge/0135b0d5063ca1184c42fba70eeaae58


$spaceamounts: ((0,0), (1,0.25),(2,0.5), (3,0.75), (4,1), (5,1.25), (6,1.5), (8,2), (10,2.5), (12,3), (16,4), (20,5), (24,6), (32,8), (40,10), (48,12), (56,14), (64,16)); 
$sides: (top, bottom, left, right); 

@each $i,$space in $spaceamounts {
    @each $side in $sides {
        .m#{str-slice($side, 0, 1)}-#{$i} {
            margin-#{$side}: #{$space}rem;
        }
        .p#{str-slice($side, 0, 1)}-#{$i} {
            padding-#{$side}: #{$space}rem;
        }
        .m#{str-slice($side, 0, 1)}-auto {
            margin-#{$side}: auto;
        }
    }
}

@each $i,$space in $spaceamounts {
    .m-#{$i} {
        margin: #{$space}rem;
    }
    .p-#{$i} {
        padding: #{$space}rem;
    }
}
@each $i,$space in $spaceamounts {
    .mx-#{$i} {
        margin-left: #{$space}rem;
        margin-right: #{$space}rem;
    }
    .px-#{$i} {
        padding-left: #{$space}rem;
        padding-right: #{$space}rem;
    }

    .my-#{$i} {
        margin-top: #{$space}rem;
        margin-bottom: #{$space}rem;
    }
    .py-#{$i} {
        padding-top: #{$space}rem;
        padding-bottom: #{$space}rem;
    }
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

Here's an updated one:

https://gist.github.com/geongeorge/c7ce3980cf31c547014d38972580809e