Move layout-grid classes to utility layer (#1535)

Relocate layout-grid classes to the utility layer to enhance
IntelliSense support and ensure better compatibility with other utility
classes, particularly for the `display` CSS property.

Author: oscarcarlstrom

.changeset/flat-pears-spend.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-tailwind": patch
+---
+
+The layout-grid classes are moved to the @utility layer, this way the classes work with IntelliSense and has better compatability with other utility classes (especially important for controlling the `display` CSS property)

packages/tailwind/tailwind-base.css

@@ -113,6 +113,61 @@
   @apply sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
 }
 
+/** Grid base, defines the grid columns and their spacing */
+@utility layout-grid {
+  @apply layout-grid-gap-x sm:grid-cols-14 grid;
+}
+
+/** Grid container that applies the grid columns, grid spacing and the container component class */
+@utility layout-grid-container {
+  @apply layout-grid container;
+  /** Make content of the grid span the mid 12 columns as a default (unless it has another explicit col-span class) */
+  & > * {
+    @apply sm:col-start-2 sm:col-span-12;
+  }
+}
+
+@utility layout-subgrid-* {
+  @apply layout-grid-gap-x grid;
+}
+
+@utility layout-subgrid-1 {
+  @apply grid-cols-1;
+}
+@utility layout-subgrid-2 {
+  @apply grid-cols-2;
+}
+@utility layout-subgrid-3 {
+  @apply grid-cols-3;
+}
+@utility layout-subgrid-4 {
+  @apply grid-cols-4;
+}
+@utility layout-subgrid-5 {
+  @apply grid-cols-5;
+}
+@utility layout-subgrid-6 {
+  @apply grid-cols-6;
+}
+@utility layout-subgrid-7 {
+  @apply grid-cols-7;
+}
+@utility layout-subgrid-8 {
+  @apply grid-cols-8;
+}
+@utility layout-subgrid-9 {
+  @apply grid-cols-9;
+}
+@utility layout-subgrid-10 {
+  @apply grid-cols-10;
+}
+@utility layout-subgrid-11 {
+  @apply grid-cols-11;
+}
+@utility layout-subgrid-12 {
+  @apply grid-cols-12;
+}
+
 @utility layout-gap-x {
   @apply gap-x-2;
   @apply layout-grid-gap-x;
@@ -202,64 +257,6 @@
 }
 
 @layer components {
-  /*** Grid Layout ***/
-
-  .layout-grid,
-  .layout-grid-container {
-    /** Grid base: defines the grid columns and their spacing */
-    @apply layout-grid-gap-x sm:grid-cols-14 grid;
-
-    /** Grid container that applies the grid columns, grid spacing and the container component class */
-    &.layout-grid-container {
-      @apply container;
-      /** Make content of the grid span the mid 12 columns as a default (unless it has another explicit col-span class) */
-      & > * {
-        @apply sm:col-start-2 sm:col-span-12;
-      }
-    }
-  }
-
-  [class*="layout-subgrid-"] {
-    @apply layout-grid-gap-x grid;
-  }
-
-  [class*="layout-subgrid-1"] {
-    @apply grid-cols-1;
-  }
-  [class*="layout-subgrid-2"] {
-    @apply grid-cols-2;
-  }
-  [class*="layout-subgrid-3"] {
-    @apply grid-cols-3;
-  }
-  [class*="layout-subgrid-4"] {
-    @apply grid-cols-4;
-  }
-  [class*="layout-subgrid-5"] {
-    @apply grid-cols-5;
-  }
-  [class*="layout-subgrid-6"] {
-    @apply grid-cols-6;
-  }
-  [class*="layout-subgrid-7"] {
-    @apply grid-cols-7;
-  }
-  [class*="layout-subgrid-8"] {
-    @apply grid-cols-8;
-  }
-  [class*="layout-subgrid-9"] {
-    @apply grid-cols-9;
-  }
-  [class*="layout-subgrid-10"] {
-    @apply grid-cols-10;
-  }
-  [class*="layout-subgrid-11"] {
-    @apply grid-cols-11;
-  }
-  [class*="layout-subgrid-12"] {
-    @apply grid-cols-12;
-  }
-
   /*** Link List component styles ***/
   .link-list-container {
     @apply @container;