Tailwind sucks so I made a worse kit

colors.scss

@use "sass:color";
@use "sass:math";
@use "sass:map";

@use "theme";

@function generate_color_shades($base_color, $color_name) {
    $colors: ();
    $base_lightness: math.ceil(color.lightness($base_color));
    
    // Generate light colors
    @for $i from 0 to $lighter_shades_generated {
        $shade_nb: $base_color_label - ($shade_nb_interval * ($lighter_shades_generated - $i));
        $new_lightness: math.min(100%, $base_lightness + ($lighter_magic_number * ($lighter_shades_generated - $i)));
        $new_color: color.change($base_color, $lightness: $new_lightness);
        
        $colors: map.set($colors, #{$color_name}-#{$shade_nb}, $new_color);
    }
    
    $colors: map.set($colors, #{$color_name}-#{$base_color_label}, $base_color);
    
    // Generate dark colors
    @for $i from 0 to $darker_shades_generated {
        $shade_nb: $base-color-label + ($shade_nb_interval * ($i + 1));
        $new_lightness: math.max(0%, $base_lightness - ($darker_magic_number * ($i + 1)));
        $new_color: color.change($base_color, $lightness: $new_lightness);
        $colors: map.set($colors, #{$color_name}-#{u$shade_nb}, $new_color);
    }
 
    @return $colors;
}

$color_properties: (
    "background-color": "bg",
    "color": "color",
    "border": "border",
);

$colors_map: (
    "blue": #3d578f
);

@each $color_name, $color in $colors_map {
    $shades_map: generate_color_shades($color, $color_name);
    
    @each $shade_name, $shade in $shades_map {
        @each $property, $short in $color_properties {
            .#{$short}#{$shade_name} {
                #{$property}: $shade;
            }
        }
    }
}

spacing.scss

@use "sass:string";

@use "theme";

$spacing_properties: padding, margin;
$side_properties: "", top, left, bottom, right;
$axis_properties: x, y;

@each $property in $spacing_properties {
    $prop_short: string.slice($property, 1, 1);
    
    @each $side in $side_properties {
        $side_short: string.slice($side, 1, 1);
        
        @for $i from 1 through $iteration {
            $value: #{$i * $root_space_size};
            $prop: $property;

            @if $side != "" {
                $prop: #{$property}-#{$side};
            }
        
            .#{$prop_short}#{$side_short}#{$i} {
                #{$prop}: $value;
            }
        }
    }
    
    @each $axis in $axis_properties {
        @for $i from 1 through $iteration {
            $value: #{$i * $root_space_size};

            .#{$prop_short}#{$axis}#{$i} {
                @if $axis == x {
                    #{$property}-left: $value;
                    #{$property}-right: $value;
                }
                
                @if $axis == y {
                    #{$property}-top: $value;
                    #{$property}-bottom: $value;
                }
            }
        }
    }
}

theme.scss

$root_font_size: 16px;

// USED FOR SPACINGS
$spacing_ratio: 0.5;
$root_space_size: $root_font_size * $spacing_ratio;

$iteration: 10;

// USED FOR COLORS
$darker_shades_generated: 4;
$darker_magic_number: 11;

$lighter_shades_generated: 5;
$lighter_magic_number: 8%;

$start_shade_nb: 100;
$shade_nb_interval: 100;

$shades_per_color: 1 + $darker_shades_generated + $lighter_shades_generated;
$last_shade_nb: $start_shade_nb + (($shades_per_color - 1) * $shade_nb_interval);

$base_color_label: $start_shade_nb + ($shade_nb_interval * $lighter_shades_generated);