Breakpoint indicator #svelte #tailwind #breakpoints

breakpoint-indicator.svelte

<script lang="ts">
	import { dev } from '$app/environment';

	let hide = $state(false);
</script>

{#if dev}
	<aside
		ondblclick={() => (hide = true)}
		class:!hidden={hide}
		class="flex-center fixed bottom-0 right-5 z-50 cursor-pointer rounded-t bg-white text-gray-700">
		<div class="min-w-[60px] px-[10px] py-[5px] text-center text-[14px] font-bold">
			<!-- Bellow will need to be updated to match the configured Tail -->
			<span class="sm:hidden"> Default </span>
			<span class="hidden sm:block md:hidden"> SM </span>
			<span class="hidden md:block lg:hidden"> MD </span>
			<span class="hidden lg:block xl:hidden"> LG </span>
			<span class="hidden xl:block 2xl:hidden"> XL </span>
			<span class="hidden 2xl:block"> 2XL </span>
		</div>
	</aside>
{/if}

<style>
	aside {
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.14),
			0 2px 4px rgba(0, 0, 0, 0.24);
	}
</style>