Add layout gap utils (#1415)

## Layout gap utils

Add new utility classes for layout x/y gap. These can be used inside
layout grids/flex containers for consistent layout spacing. This will
also be added to horizontal image-cards in the `react`-package after
this is merged.

Next steps in the tailwind-package will be to add utility-classes for
`layout-grid` so that we can move away from the current situation where
this is duplicated in each team's code base.

I think it makes sense to create a single release for this, so let's
wait until remaning PR's have been approved and merged.

Author: oscarcarlstrom

.changeset/yellow-kings-drive.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-tailwind": minor
+---
+
+Add new utility classes for layout x/y gap.

packages/tailwind/tailwind-base.css

@@ -108,6 +108,14 @@
   @apply bg-white grow;
 }
 
+@utility layout-gap-x {
+  @apply gap-x-2 sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
+}
+
+@utility layout-gap-y {
+  @apply gap-y-4 sm:gap-y-6 md:gap-y-8 lg:gap-y-10 xl:gap-y-12;
+}
+
 @utility container {
   @apply w-full px-(--container-gutter-width) mx-auto max-w-(--container-width);
 }