feat: add tailwind breakpoint indicator

acdh-oeaw · Oct 28, 2024 · 5cef2fa · 5cef2fa
1 parent 11e7357
commit 5cef2fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -2,6 +2,7 @@
 	<NuxtLayout>
 		<NuxtPage />
 		<NuxtLoadingIndicator />
+		<TailwindIndicator />
 		<NuxtRouteAnnouncer />
 	</NuxtLayout>
 </template>
diff --git a/app/components/tailwind-indicator.vue b/app/components/tailwind-indicator.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const isVisible = import.meta.dev;
+</script>
+
+<template>
+	<div
+		v-if="isVisible"
+		class="fixed bottom-4 right-4 z-10 grid size-8 place-content-center rounded-full bg-on-background font-mono text-xs font-medium text-background"
+	>
+		<span class="xs:hidden">2xs</span>
+		<span class="max-xs:hidden sm:hidden">xs</span>
+		<span class="max-sm:hidden md:hidden">sm</span>
+		<span class="max-md:hidden lg:hidden">md</span>
+		<span class="max-lg:hidden xl:hidden">lg</span>
+		<span class="max-xl:hidden 2xl:hidden">xl</span>
+		<span class="max-2xl:hidden 3xl:hidden">2xl</span>
+		<span class="max-3xl:hidden">3xl</span>
+	</div>
+</template>