add desktop-only and mobile-only global classes

darkroomengineering · Feb 21, 2025 · 170ce73 · 170ce73 · github-actions · Feb 21, 2025
1 parent 970b105
commit 170ce73
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/styles/css/tailwind.css b/styles/css/tailwind.css
@@ -53,6 +53,18 @@
 	@variant dt { font-size: calc(((24 * 100) / var(--device-width)) * 1vw); }
 }
 
+@utility desktop-only {
+  @media (--mobile) {
+    display: none;
+  }
+}
+
+@utility mobile-only {
+  @media (--desktop) {
+    display: none;
+  }
+}
+
 @utility design-grid {
 	display: grid;
 	grid-template-columns: repeat(var(--columns), 1fr);

diff --git a/styles/scripts/generate-tailwind.ts b/styles/scripts/generate-tailwind.ts
@@ -74,6 +74,18 @@ ${Object.entries(typography)
   )
   .join('\n')}
 
+@utility desktop-only {
+  @media (--mobile) {
+    display: none;
+  }
+}
+
+@utility mobile-only {
+  @media (--desktop) {
+    display: none;
+  }
+}
+
 @utility design-grid {
 	display: grid;
 	grid-template-columns: repeat(var(--columns), 1fr);