Tailwind inspired utility classeses, generated by SassMeister.com.

input.scss

 $spacing-scale: (
    "-0": 0px,
    "": 1px,
    "half": 0.125rem,
    "-1": 0.25rem,
    "1half": 0.375rem,
    "-2": 0.5rem,
    "2half": 0.625rem,
    "-3": 0.75rem,
    "3half": 0.875rem,
    "-4": 1rem,
    "-5": 1.25rem,
    "-6": 1.5rem,
    "-7": 1.75rem,
    "-8": 2rem,
    "-9": 2.25rem,
    "-10": 2.5rem,
    "-11": 2.75rem,
    "-12": 3rem,
    "-14": 3.5rem,
    "-16": 4rem,
    "-20": 5rem,
    "-24": 6rem,
    "-28": 7rem,
    "-32": 8rem,
    "-36": 9rem,
    "-40": 10rem,
    "-44": 11rem,
    "-48": 12rem,
    "-52": 13rem,
    "-56": 14rem,
    "-60": 15rem,
    "-64": 16rem,
    "-72": 18rem,
    "-80": 20rem,
    "-96": 24rem,
  );
  
  
  @each $scale, $value in $spacing-scale {
      .ms#{$scale}{
          margin-inline-start : $value
      }
      .me#{$scale}{
          margin-inline-end : $value
      }
      .mt#{$scale}{
          margin-block-start : $value
      }
      .mb#{$scale}{
          margin-block-end : $value
      }
      .ps#{$scale}{
          padding-inline-start : $value
      }
      .pe#{$scale}{
          padding-inline-end : $value
      }
      .pt#{$scale}{
          padding-block-start : $value
      }
      .pb#{$scale}{
          padding-block-end : $value
      }
  }

output.css

.ms-0 {
  margin-inline-start: 0px;
}

.me-0 {
  margin-inline-end: 0px;
}

.mt-0 {
  margin-block-start: 0px;
}

.mb-0 {
  margin-block-end: 0px;
}

.ps-0 {
  padding-inline-start: 0px;
}

.pe-0 {
  padding-inline-end: 0px;
}

.pt-0 {
  padding-block-start: 0px;
}

.pb-0 {
  padding-block-end: 0px;
}

.ms {
  margin-inline-start: 1px;
}

.me {
  margin-inline-end: 1px;
}

.mt {
  margin-block-start: 1px;
}

.mb {
  margin-block-end: 1px;
}

.ps {
  padding-inline-start: 1px;
}

.pe {
  padding-inline-end: 1px;
}

.pt {
  padding-block-start: 1px;
}

.pb {
  padding-block-end: 1px;
}

.mshalf {
  margin-inline-start: 0.125rem;
}

.mehalf {
  margin-inline-end: 0.125rem;
}

.mthalf {
  margin-block-start: 0.125rem;
}

.mbhalf {
  margin-block-end: 0.125rem;
}

.pshalf {
  padding-inline-start: 0.125rem;
}

.pehalf {
  padding-inline-end: 0.125rem;
}

.pthalf {
  padding-block-start: 0.125rem;
}

.pbhalf {
  padding-block-end: 0.125rem;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.mt-1 {
  margin-block-start: 0.25rem;
}

.mb-1 {
  margin-block-end: 0.25rem;
}

.ps-1 {
  padding-inline-start: 0.25rem;
}

.pe-1 {
  padding-inline-end: 0.25rem;
}

.pt-1 {
  padding-block-start: 0.25rem;
}

.pb-1 {
  padding-block-end: 0.25rem;
}

.ms1half {
  margin-inline-start: 0.375rem;
}

.me1half {
  margin-inline-end: 0.375rem;
}

.mt1half {
  margin-block-start: 0.375rem;
}

.mb1half {
  margin-block-end: 0.375rem;
}

.ps1half {
  padding-inline-start: 0.375rem;
}

.pe1half {
  padding-inline-end: 0.375rem;
}

.pt1half {
  padding-block-start: 0.375rem;
}

.pb1half {
  padding-block-end: 0.375rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.mt-2 {
  margin-block-start: 0.5rem;
}

.mb-2 {
  margin-block-end: 0.5rem;
}

.ps-2 {
  padding-inline-start: 0.5rem;
}

.pe-2 {
  padding-inline-end: 0.5rem;
}

.pt-2 {
  padding-block-start: 0.5rem;
}

.pb-2 {
  padding-block-end: 0.5rem;
}

.ms2half {
  margin-inline-start: 0.625rem;
}

.me2half {
  margin-inline-end: 0.625rem;
}

.mt2half {
  margin-block-start: 0.625rem;
}

.mb2half {
  margin-block-end: 0.625rem;
}

.ps2half {
  padding-inline-start: 0.625rem;
}

.pe2half {
  padding-inline-end: 0.625rem;
}

.pt2half {
  padding-block-start: 0.625rem;
}

.pb2half {
  padding-block-end: 0.625rem;
}

.ms-3 {
  margin-inline-start: 0.75rem;
}

.me-3 {
  margin-inline-end: 0.75rem;
}

.mt-3 {
  margin-block-start: 0.75rem;
}

.mb-3 {
  margin-block-end: 0.75rem;
}

.ps-3 {
  padding-inline-start: 0.75rem;
}

.pe-3 {
  padding-inline-end: 0.75rem;
}

.pt-3 {
  padding-block-start: 0.75rem;
}

.pb-3 {
  padding-block-end: 0.75rem;
}

.ms3half {
  margin-inline-start: 0.875rem;
}

.me3half {
  margin-inline-end: 0.875rem;
}

.mt3half {
  margin-block-start: 0.875rem;
}

.mb3half {
  margin-block-end: 0.875rem;
}

.ps3half {
  padding-inline-start: 0.875rem;
}

.pe3half {
  padding-inline-end: 0.875rem;
}

.pt3half {
  padding-block-start: 0.875rem;
}

.pb3half {
  padding-block-end: 0.875rem;
}

.ms-4 {
  margin-inline-start: 1rem;
}

.me-4 {
  margin-inline-end: 1rem;
}

.mt-4 {
  margin-block-start: 1rem;
}

.mb-4 {
  margin-block-end: 1rem;
}

.ps-4 {
  padding-inline-start: 1rem;
}

.pe-4 {
  padding-inline-end: 1rem;
}

.pt-4 {
  padding-block-start: 1rem;
}

.pb-4 {
  padding-block-end: 1rem;
}

.ms-5 {
  margin-inline-start: 1.25rem;
}

.me-5 {
  margin-inline-end: 1.25rem;
}

.mt-5 {
  margin-block-start: 1.25rem;
}

.mb-5 {
  margin-block-end: 1.25rem;
}

.ps-5 {
  padding-inline-start: 1.25rem;
}

.pe-5 {
  padding-inline-end: 1.25rem;
}

.pt-5 {
  padding-block-start: 1.25rem;
}

.pb-5 {
  padding-block-end: 1.25rem;
}

.ms-6 {
  margin-inline-start: 1.5rem;
}

.me-6 {
  margin-inline-end: 1.5rem;
}

.mt-6 {
  margin-block-start: 1.5rem;
}

.mb-6 {
  margin-block-end: 1.5rem;
}

.ps-6 {
  padding-inline-start: 1.5rem;
}

.pe-6 {
  padding-inline-end: 1.5rem;
}

.pt-6 {
  padding-block-start: 1.5rem;
}

.pb-6 {
  padding-block-end: 1.5rem;
}

.ms-7 {
  margin-inline-start: 1.75rem;
}

.me-7 {
  margin-inline-end: 1.75rem;
}

.mt-7 {
  margin-block-start: 1.75rem;
}

.mb-7 {
  margin-block-end: 1.75rem;
}

.ps-7 {
  padding-inline-start: 1.75rem;
}

.pe-7 {
  padding-inline-end: 1.75rem;
}

.pt-7 {
  padding-block-start: 1.75rem;
}

.pb-7 {
  padding-block-end: 1.75rem;
}

.ms-8 {
  margin-inline-start: 2rem;
}

.me-8 {
  margin-inline-end: 2rem;
}

.mt-8 {
  margin-block-start: 2rem;
}

.mb-8 {
  margin-block-end: 2rem;
}

.ps-8 {
  padding-inline-start: 2rem;
}

.pe-8 {
  padding-inline-end: 2rem;
}

.pt-8 {
  padding-block-start: 2rem;
}

.pb-8 {
  padding-block-end: 2rem;
}

.ms-9 {
  margin-inline-start: 2.25rem;
}

.me-9 {
  margin-inline-end: 2.25rem;
}

.mt-9 {
  margin-block-start: 2.25rem;
}

.mb-9 {
  margin-block-end: 2.25rem;
}

.ps-9 {
  padding-inline-start: 2.25rem;
}

.pe-9 {
  padding-inline-end: 2.25rem;
}

.pt-9 {
  padding-block-start: 2.25rem;
}

.pb-9 {
  padding-block-end: 2.25rem;
}

.ms-10 {
  margin-inline-start: 2.5rem;
}

.me-10 {
  margin-inline-end: 2.5rem;
}

.mt-10 {
  margin-block-start: 2.5rem;
}

.mb-10 {
  margin-block-end: 2.5rem;
}

.ps-10 {
  padding-inline-start: 2.5rem;
}

.pe-10 {
  padding-inline-end: 2.5rem;
}

.pt-10 {
  padding-block-start: 2.5rem;
}

.pb-10 {
  padding-block-end: 2.5rem;
}

.ms-11 {
  margin-inline-start: 2.75rem;
}

.me-11 {
  margin-inline-end: 2.75rem;
}

.mt-11 {
  margin-block-start: 2.75rem;
}

.mb-11 {
  margin-block-end: 2.75rem;
}

.ps-11 {
  padding-inline-start: 2.75rem;
}

.pe-11 {
  padding-inline-end: 2.75rem;
}

.pt-11 {
  padding-block-start: 2.75rem;
}

.pb-11 {
  padding-block-end: 2.75rem;
}

.ms-12 {
  margin-inline-start: 3rem;
}

.me-12 {
  margin-inline-end: 3rem;
}

.mt-12 {
  margin-block-start: 3rem;
}

.mb-12 {
  margin-block-end: 3rem;
}

.ps-12 {
  padding-inline-start: 3rem;
}

.pe-12 {
  padding-inline-end: 3rem;
}

.pt-12 {
  padding-block-start: 3rem;
}

.pb-12 {
  padding-block-end: 3rem;
}

.ms-14 {
  margin-inline-start: 3.5rem;
}

.me-14 {
  margin-inline-end: 3.5rem;
}

.mt-14 {
  margin-block-start: 3.5rem;
}

.mb-14 {
  margin-block-end: 3.5rem;
}

.ps-14 {
  padding-inline-start: 3.5rem;
}

.pe-14 {
  padding-inline-end: 3.5rem;
}

.pt-14 {
  padding-block-start: 3.5rem;
}

.pb-14 {
  padding-block-end: 3.5rem;
}

.ms-16 {
  margin-inline-start: 4rem;
}

.me-16 {
  margin-inline-end: 4rem;
}

.mt-16 {
  margin-block-start: 4rem;
}

.mb-16 {
  margin-block-end: 4rem;
}

.ps-16 {
  padding-inline-start: 4rem;
}

.pe-16 {
  padding-inline-end: 4rem;
}

.pt-16 {
  padding-block-start: 4rem;
}

.pb-16 {
  padding-block-end: 4rem;
}

.ms-20 {
  margin-inline-start: 5rem;
}

.me-20 {
  margin-inline-end: 5rem;
}

.mt-20 {
  margin-block-start: 5rem;
}

.mb-20 {
  margin-block-end: 5rem;
}

.ps-20 {
  padding-inline-start: 5rem;
}

.pe-20 {
  padding-inline-end: 5rem;
}

.pt-20 {
  padding-block-start: 5rem;
}

.pb-20 {
  padding-block-end: 5rem;
}

.ms-24 {
  margin-inline-start: 6rem;
}

.me-24 {
  margin-inline-end: 6rem;
}

.mt-24 {
  margin-block-start: 6rem;
}

.mb-24 {
  margin-block-end: 6rem;
}

.ps-24 {
  padding-inline-start: 6rem;
}

.pe-24 {
  padding-inline-end: 6rem;
}

.pt-24 {
  padding-block-start: 6rem;
}

.pb-24 {
  padding-block-end: 6rem;
}

.ms-28 {
  margin-inline-start: 7rem;
}

.me-28 {
  margin-inline-end: 7rem;
}

.mt-28 {
  margin-block-start: 7rem;
}

.mb-28 {
  margin-block-end: 7rem;
}

.ps-28 {
  padding-inline-start: 7rem;
}

.pe-28 {
  padding-inline-end: 7rem;
}

.pt-28 {
  padding-block-start: 7rem;
}

.pb-28 {
  padding-block-end: 7rem;
}

.ms-32 {
  margin-inline-start: 8rem;
}

.me-32 {
  margin-inline-end: 8rem;
}

.mt-32 {
  margin-block-start: 8rem;
}

.mb-32 {
  margin-block-end: 8rem;
}

.ps-32 {
  padding-inline-start: 8rem;
}

.pe-32 {
  padding-inline-end: 8rem;
}

.pt-32 {
  padding-block-start: 8rem;
}

.pb-32 {
  padding-block-end: 8rem;
}

.ms-36 {
  margin-inline-start: 9rem;
}

.me-36 {
  margin-inline-end: 9rem;
}

.mt-36 {
  margin-block-start: 9rem;
}

.mb-36 {
  margin-block-end: 9rem;
}

.ps-36 {
  padding-inline-start: 9rem;
}

.pe-36 {
  padding-inline-end: 9rem;
}

.pt-36 {
  padding-block-start: 9rem;
}

.pb-36 {
  padding-block-end: 9rem;
}

.ms-40 {
  margin-inline-start: 10rem;
}

.me-40 {
  margin-inline-end: 10rem;
}

.mt-40 {
  margin-block-start: 10rem;
}

.mb-40 {
  margin-block-end: 10rem;
}

.ps-40 {
  padding-inline-start: 10rem;
}

.pe-40 {
  padding-inline-end: 10rem;
}

.pt-40 {
  padding-block-start: 10rem;
}

.pb-40 {
  padding-block-end: 10rem;
}

.ms-44 {
  margin-inline-start: 11rem;
}

.me-44 {
  margin-inline-end: 11rem;
}

.mt-44 {
  margin-block-start: 11rem;
}

.mb-44 {
  margin-block-end: 11rem;
}

.ps-44 {
  padding-inline-start: 11rem;
}

.pe-44 {
  padding-inline-end: 11rem;
}

.pt-44 {
  padding-block-start: 11rem;
}

.pb-44 {
  padding-block-end: 11rem;
}

.ms-48 {
  margin-inline-start: 12rem;
}

.me-48 {
  margin-inline-end: 12rem;
}

.mt-48 {
  margin-block-start: 12rem;
}

.mb-48 {
  margin-block-end: 12rem;
}

.ps-48 {
  padding-inline-start: 12rem;
}

.pe-48 {
  padding-inline-end: 12rem;
}

.pt-48 {
  padding-block-start: 12rem;
}

.pb-48 {
  padding-block-end: 12rem;
}

.ms-52 {
  margin-inline-start: 13rem;
}

.me-52 {
  margin-inline-end: 13rem;
}

.mt-52 {
  margin-block-start: 13rem;
}

.mb-52 {
  margin-block-end: 13rem;
}

.ps-52 {
  padding-inline-start: 13rem;
}

.pe-52 {
  padding-inline-end: 13rem;
}

.pt-52 {
  padding-block-start: 13rem;
}

.pb-52 {
  padding-block-end: 13rem;
}

.ms-56 {
  margin-inline-start: 14rem;
}

.me-56 {
  margin-inline-end: 14rem;
}

.mt-56 {
  margin-block-start: 14rem;
}

.mb-56 {
  margin-block-end: 14rem;
}

.ps-56 {
  padding-inline-start: 14rem;
}

.pe-56 {
  padding-inline-end: 14rem;
}

.pt-56 {
  padding-block-start: 14rem;
}

.pb-56 {
  padding-block-end: 14rem;
}

.ms-60 {
  margin-inline-start: 15rem;
}

.me-60 {
  margin-inline-end: 15rem;
}

.mt-60 {
  margin-block-start: 15rem;
}

.mb-60 {
  margin-block-end: 15rem;
}

.ps-60 {
  padding-inline-start: 15rem;
}

.pe-60 {
  padding-inline-end: 15rem;
}

.pt-60 {
  padding-block-start: 15rem;
}

.pb-60 {
  padding-block-end: 15rem;
}

.ms-64 {
  margin-inline-start: 16rem;
}

.me-64 {
  margin-inline-end: 16rem;
}

.mt-64 {
  margin-block-start: 16rem;
}

.mb-64 {
  margin-block-end: 16rem;
}

.ps-64 {
  padding-inline-start: 16rem;
}

.pe-64 {
  padding-inline-end: 16rem;
}

.pt-64 {
  padding-block-start: 16rem;
}

.pb-64 {
  padding-block-end: 16rem;
}

.ms-72 {
  margin-inline-start: 18rem;
}

.me-72 {
  margin-inline-end: 18rem;
}

.mt-72 {
  margin-block-start: 18rem;
}

.mb-72 {
  margin-block-end: 18rem;
}

.ps-72 {
  padding-inline-start: 18rem;
}

.pe-72 {
  padding-inline-end: 18rem;
}

.pt-72 {
  padding-block-start: 18rem;
}

.pb-72 {
  padding-block-end: 18rem;
}

.ms-80 {
  margin-inline-start: 20rem;
}

.me-80 {
  margin-inline-end: 20rem;
}

.mt-80 {
  margin-block-start: 20rem;
}

.mb-80 {
  margin-block-end: 20rem;
}

.ps-80 {
  padding-inline-start: 20rem;
}

.pe-80 {
  padding-inline-end: 20rem;
}

.pt-80 {
  padding-block-start: 20rem;
}

.pb-80 {
  padding-block-end: 20rem;
}

.ms-96 {
  margin-inline-start: 24rem;
}

.me-96 {
  margin-inline-end: 24rem;
}

.mt-96 {
  margin-block-start: 24rem;
}

.mb-96 {
  margin-block-end: 24rem;
}

.ps-96 {
  padding-inline-start: 24rem;
}

.pe-96 {
  padding-inline-end: 24rem;
}

.pt-96 {
  padding-block-start: 24rem;
}

.pb-96 {
  padding-block-end: 24rem;
}

settings.json

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