Make ScreenSize widget dynamic to Tailwind config

And add an "all screens" popup

Author: WarningImHack3r

src/lib/ScreenSize.svelte

@@ -1,23 +1,54 @@
-<script>
+<script lang="ts">
 	// From https://gist.github.com/WarningImHack3r/375c559c5ee120408f9df2390ec2747a
 	// Inspired by https://gist.github.com/Sh4yy/0300299ae60af4910bcb341703946330
+	import { slide } from "svelte/transition";
+	import tailwindConfig from "/tailwind.config";
+	import resolveConfig from "tailwindcss/resolveConfig";
+
+	const fullConfig = resolveConfig(tailwindConfig);
+	const screens = Object.keys(fullConfig.theme.screens)
+		.map(screen => ({
+			name: screen,
+			size: parseInt(fullConfig.theme.screens[screen].replace("px", ""))
+		}))
+		.sort((a, b) => a.size - b.size);
+	let matchingScreen: (typeof screens)[number] | undefined;
+	$: matchingScreen = screens.findLast(screen => screen.size <= width);
+
 	let width = 0;
 	let height = 0;
+
+	let showAllScreens = false;
 </script>
 
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 
 <div
-	class="fixed bottom-5 left-5 z-50 flex items-center space-x-2 rounded-full border border-gray-500 bg-black px-2.5 py-1 font-mono text-xs font-medium text-white shadow-lg shadow-black/50"
+	class="font-mono text-xs font-medium text-white *:fixed *:border *:border-gray-500 *:bg-black *:px-2.5 *:py-1 *:shadow-lg *:shadow-black/50"
 >
-	<span>
-		{width.toLocaleString()} x {height.toLocaleString()}
-	</span>
-	<div class="h-4 w-px bg-gray-800" />
-	<span class="sm:hidden">XS</span>
-	<span class="hidden sm:max-md:inline">SM</span>
-	<span class="hidden md:max-lg:inline">MD</span>
-	<span class="hidden lg:max-xl:inline">LG</span>
-	<span class="hidden xl:max-2xl:inline">XL</span>
-	<span class="max-2xl:hidden">2XL</span>
+	<div class="bottom-5 left-5 z-50 flex items-center rounded-full !pr-1">
+		<span>
+			{width.toLocaleString()} x {height.toLocaleString()}
+		</span>
+		{#if matchingScreen}
+			<div class="ml-1.5 mr-1 h-4 w-px bg-gray-800"></div>
+			<button
+				type="button"
+				class="inline rounded-l-sm rounded-r-full px-1 hover:bg-neutral-500 active:bg-neutral-600"
+				on:click={() => (showAllScreens = !showAllScreens)}
+			>
+				{matchingScreen.name.toUpperCase()}
+			</button>
+		{/if}
+	</div>
+	{#if showAllScreens}
+		<div class="bottom-12 left-5 z-40 rounded-xl duration-300" transition:slide>
+			{#each screens as screen}
+				<div class="flex justify-between gap-8">
+					<span>{screen.name.toUpperCase()}</span>
+					<span class="text-neutral-400">{screen.size.toLocaleString()}px</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>

tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import { fontFamily, screens } from "tailwindcss/defaultTheme";
+import defaultTheme from "tailwindcss/defaultTheme";
 import typography from "@tailwindcss/typography";
 
 export default {
@@ -16,7 +16,7 @@ export default {
 		},
 		screens: {
 			xs: "475px",
-			...screens
+			...defaultTheme.screens
 		},
 		extend: {
 			colors: {
@@ -60,7 +60,7 @@ export default {
 				sm: "calc(var(--radius) - 4px)"
 			},
 			fontFamily: {
-				sans: [...fontFamily.sans]
+				sans: [...defaultTheme.fontFamily.sans]
 			},
 			typography: () => ({
 				DEFAULT: {

vite.config.ts

@@ -2,5 +2,10 @@ import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			strict: false
+		}
+	}
 });