Breakpoint

Description

Displays the current breakpoint and window.innerWidth, based on the breakpoints provided. Defaults to TailwindCSS breakpoint sizes.

With SvelteKit, this component can be wrapped in an {#if dev} block that checks for the dev module, to show only during development.

props

• breakpoints - array of objects representing the breakpoints of the application
• class
• id

example

<script lang="ts">
    import { Breakpoint } from "drab";
</script>

<Breakpoint
    class="card inline-block px-3 py-2 font-mono text-sm tabular-nums"
/>