feat(helpers): introduce padding and margin helpers from Tailwind (#1488

)

src/styles/isomer-template/helpers.scss

@@ -0,0 +1,84 @@
+/*
+  These are margin and padding helpers with values that follow the ones
+  used by Tailwind CSS. This will generate several classes, such as:
+  - .mr-8 which gives margin-right 2rem
+  - .mx-16 which gives margin-left and margin-right 4rem
+  - .py-4 which gives padding-top and padding-bottom 1rem
+  - .p-20 which gives padding 5rem
+*/
+
+$spaceamounts: (
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  16,
+  20,
+  24,
+  28,
+  32,
+  36,
+  40,
+  44,
+  48,
+  52,
+  56,
+  60,
+  64,
+  72,
+  80,
+  96
+);
+$sides: (top, bottom, left, right);
+
+@each $space in $spaceamounts {
+  $remSpace: calc(#{$space}rem / 4);
+
+  @each $side in $sides {
+    .m#{str-slice($side, 0, 1)}-#{$space} {
+      margin-#{$side}: $remSpace;
+    }
+
+    .p#{str-slice($side, 0, 1)}-#{$space} {
+      padding-#{$side}: $remSpace;
+    }
+  }
+
+  .mx-#{$space} {
+    margin-left: $remSpace;
+    margin-right: $remSpace;
+  }
+
+  .px-#{$space} {
+    padding-left: $remSpace;
+    padding-right: $remSpace;
+  }
+
+  .my-#{$space} {
+    margin-top: $remSpace;
+    margin-bottom: $remSpace;
+  }
+
+  .py-#{$space} {
+    padding-top: $remSpace;
+    padding-bottom: $remSpace;
+  }
+
+  .m-#{$space} {
+    margin: $remSpace;
+  }
+
+  .p-#{$space} {
+    padding: $remSpace;
+  }
+}

src/styles/isomer-template/styles.scss

@@ -0,0 +1,3 @@
+@charset 'UTF-8';
+
+@use "helpers";

src/styles/preview-panel.scss

@@ -2,6 +2,7 @@
 
 @include meta.load-css("sgds-govtech/css/sgds");
 @include meta.load-css("./isomer-template.scss");
+@include meta.load-css("./isomer-template/styles.scss");
 
 /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
 blockquote,