Tailwind/Tachyons genrerator in pure Sass.

input.scss

@function cfg($key, $map: $cfg) {
	@return map-get($map, $key);
}


$cfg: (
    whitespace: (
        values: (
            0: 0,
            1: 1px,
            2: 2px,
            3: 4px,
        ),
        rules: (
            pv: (ruleset: (padding-top, padding-bottom,),),
            ph: (ruleset: (padding-left, padding-right,),),
            pt: (ruleset: (padding-top,)),
            pb: (ruleset: (padding-bottom,)),
            pl: (ruleset: (padding-left,)),
            pr: (ruleset: (padding-right,)),
            mv: (ruleset: (margin-top, margin-bottom,),),
            mh: (ruleset: (margin-left, margin-right,),),
            mt: (ruleset: (margin-top,)),
            mb: (ruleset: (margin-bottom,)),
            ml: (ruleset: (margin-left,)),
            mr: (ruleset: (margin-right,)),
        )
    ),
    maxwidths: (
        values: (
            0: 0,
            1: 320px,
            2: 480px,
            3: 768px,
            4: 960px,
            5: 1200px,
        ),
        rules: (
            mw: (ruleset: (max-width,),),
        )
    ),
    widths: (
        values: (
            10: 10%,
            20: 20%,
            25: 25%,
            30: 30%,
            third: calc(100%/3),
            40: 40%,
            50: 50%,
            60: 60%,
            two-thirds: calc(200%/3),
            70: 70%,
            75: 75%,
            80: 80%,
            90: 90%,
            100: 100%,
        ),
        rules: (
            mw-: (ruleset: (max-width,),),
        )
    ),
);

@each $temp, $tach in $cfg {
    @each $class1, $rules in cfg(rules, $tach) {
        @each $class2, $val in cfg(values, $tach) {
            .#{$class1}#{$class2} {
                @each $static, $prop in $rules {
                    @if type-of($prop) == list {
                        @each $rule in $prop {
                            #{$rule}: $val;
                        }
                    }
                    @if type-of($prop) == string {
                        #{$static}: #{$prop};
                    }
                }
            }
        }
    }
}

output.css

.pv0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pv1 {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pv2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.pv3 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ph0 {
  padding-left: 0;
  padding-right: 0;
}

.ph1 {
  padding-left: 1px;
  padding-right: 1px;
}

.ph2 {
  padding-left: 2px;
  padding-right: 2px;
}

.ph3 {
  padding-left: 4px;
  padding-right: 4px;
}

.pt0 {
  padding-top: 0;
}

.pt1 {
  padding-top: 1px;
}

.pt2 {
  padding-top: 2px;
}

.pt3 {
  padding-top: 4px;
}

.pb0 {
  padding-bottom: 0;
}

.pb1 {
  padding-bottom: 1px;
}

.pb2 {
  padding-bottom: 2px;
}

.pb3 {
  padding-bottom: 4px;
}

.pl0 {
  padding-left: 0;
}

.pl1 {
  padding-left: 1px;
}

.pl2 {
  padding-left: 2px;
}

.pl3 {
  padding-left: 4px;
}

.pr0 {
  padding-right: 0;
}

.pr1 {
  padding-right: 1px;
}

.pr2 {
  padding-right: 2px;
}

.pr3 {
  padding-right: 4px;
}

.mv0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mv1 {
  margin-top: 1px;
  margin-bottom: 1px;
}

.mv2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.mv3 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mh0 {
  margin-left: 0;
  margin-right: 0;
}

.mh1 {
  margin-left: 1px;
  margin-right: 1px;
}

.mh2 {
  margin-left: 2px;
  margin-right: 2px;
}

.mh3 {
  margin-left: 4px;
  margin-right: 4px;
}

.mt0 {
  margin-top: 0;
}

.mt1 {
  margin-top: 1px;
}

.mt2 {
  margin-top: 2px;
}

.mt3 {
  margin-top: 4px;
}

.mb0 {
  margin-bottom: 0;
}

.mb1 {
  margin-bottom: 1px;
}

.mb2 {
  margin-bottom: 2px;
}

.mb3 {
  margin-bottom: 4px;
}

.ml0 {
  margin-left: 0;
}

.ml1 {
  margin-left: 1px;
}

.ml2 {
  margin-left: 2px;
}

.ml3 {
  margin-left: 4px;
}

.mr0 {
  margin-right: 0;
}

.mr1 {
  margin-right: 1px;
}

.mr2 {
  margin-right: 2px;
}

.mr3 {
  margin-right: 4px;
}

.mw0 {
  max-width: 0;
}

.mw1 {
  max-width: 320px;
}

.mw2 {
  max-width: 480px;
}

.mw3 {
  max-width: 768px;
}

.mw4 {
  max-width: 960px;
}

.mw5 {
  max-width: 1200px;
}

.mw-10 {
  max-width: 10%;
}

.mw-20 {
  max-width: 20%;
}

.mw-25 {
  max-width: 25%;
}

.mw-30 {
  max-width: 30%;
}

.mw-third {
  max-width: calc(100%/3);
}

.mw-40 {
  max-width: 40%;
}

.mw-50 {
  max-width: 50%;
}

.mw-60 {
  max-width: 60%;
}

.mw-two-thirds {
  max-width: calc(200%/3);
}

.mw-70 {
  max-width: 70%;
}

.mw-75 {
  max-width: 75%;
}

.mw-80 {
  max-width: 80%;
}

.mw-90 {
  max-width: 90%;
}

.mw-100 {
  max-width: 100%;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}