Extract separate files and css layer for utilities

Author: rossta

app/javascript/css/application.css

@@ -1,4 +1,4 @@
-@layer reset, theme, layout;
+@layer reset, theme, layout, utilities;
 
 @import './reset.css' layer(reset);
 
@@ -15,7 +15,9 @@
 @import './config/grid.css' layer(layout);
 @import './layout.scss' layer(layout);
 
-@import './utilities.css';
+@import './utilities/tailwind.css';
+@import './utilities/tailwind-media.scss';
+@import './utilities/custom.css';
 
 @import './components/logo.css';
 @import './components/button.css';

app/javascript/css/utilities/custom.css

@@ -0,0 +1,41 @@
+@import '../config/variables.scss';
+
+@media screen and (min-width: $screen-md) {
+  .md\:mt-3 {
+    margin-top: 0.75rem;
+  }
+  .md\:mr-4 {
+    margin-right: 1rem;
+  }
+  .md\:w-\[20px\] {
+    width: 20px;
+  }
+  .md\:p-2 {
+    padding: 0.5rem;
+  }
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5;
+    letter-spacing: -0.017em;
+  }
+  .md\:top-\[3px\] {
+    top: 3px;
+  }
+  .md\:left-\[-72px\] {
+    left: -72px;
+  }
+}
+
+@media screen and (min-width: $screen-lg) {
+  .lg\:text-left {
+    text-align: left;
+  }
+  .lg\:text-right {
+    text-align: right;
+  }
+
+  .lg\:py-3xl {
+    padding-top: var(--space-3xl);
+    padding-bottom: var(--space-3xl);
+  }
+}

app/javascript/css/utilities/tailwind-media.scss

@@ -1,4 +1,4 @@
-@import 'config/variables.scss';
+/* Utilities copied from tailwind */
 
 .sr-only {
   position: absolute;
@@ -885,38 +885,6 @@
   width: 16px;
 }
 
-@media (min-width: 768px) {
-  .md\:w-\[20px\] {
-    width: 20px;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:p-2 {
-    padding: 0.5rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:text-base {
-    font-size: 1rem;
-    line-height: 1.5;
-    letter-spacing: -0.017em;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:top-\[3px\] {
-    top: 3px;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:left-\[-72px\] {
-    left: -72px;
-  }
-}
-
 .group:hover .group-hover\:opacity-60 {
   opacity: 0.6;
 }
@@ -933,17 +901,6 @@
   display: none;
 }
 
-@media (min-width: 768px) {
-  .md\:mt-3 {
-    margin-top: 0.75rem;
-  }
-}
-@media (min-width: 768px) {
-  .md\:mr-4 {
-    margin-right: 1rem;
-  }
-}
-
 focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
     var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -971,27 +928,3 @@ focus\:ring-0:focus {
 .text-right {
   text-align: right;
 }
-
-/* Custom utilities */
-
-.py-gap {
-  padding-top: var(--grid-gutter);
-  padding-bottom: var(--grid-gutter);
-}
-
-@media screen and (min-width: $screen-md) {
-}
-
-@media screen and (min-width: $screen-lg) {
-  lg\:text-left {
-    text-align: left;
-  }
-  lg\:text-right {
-    text-align: right;
-  }
-
-  lg\.py-3xl {
-    padding-top: var(--space-3xl);
-    padding-bottom: var(--space-3xl);
-  }
-}