From 5cef2fa4668f7f734bf34cecaa19b2b200446204 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Mon, 28 Oct 2024 12:22:50 +0100
Subject: [PATCH] feat: add tailwind breakpoint indicator

---
 app/app.vue                           |  1 +
 app/components/tailwind-indicator.vue | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 app/components/tailwind-indicator.vue

diff --git a/app/app.vue b/app/app.vue
index 186967f..d3ad388 100644
--- 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
new file mode 100644
index 0000000..a5b88e2
--- /dev/null
+++ 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>