This implementation is original ported from vueuse/useBreakpoints
Usage #
Raw:
{
"sm": false,
"md": false,
"lg": false,
"xl": false,
"2xl": false
}mdAndDown: false
lgAndDown: false
betweenSmAndMd: false
lgAndUp: false
mdAndUp: false
breakpointsTailwind:
{
"sm": 640,
"md": 768,
"lg": 1024,
"xl": 1280,
"2xl": 1536
}- Svelte
<script lang="ts">
import { breakpointsTailwind, useBreakpoints } from 'sveltuse'
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndDown = breakpoints.smaller('lg')
const lgAndDown = breakpoints.smallerOrEqual('lg')
const betweenSmAndMd = breakpoints.between('sm', 'lg')
const lgAndUp = breakpoints.greater('md')
const mdAndUp = breakpoints.greaterOrEqual('md')
</script>
<div class="flex space-x-4">
<div class="flex-none">
<div>
Raw:
<pre><code lang="json"
>{JSON.stringify($breakpoints, null, 2)}</code></pre>
</div>
<div />
<div>mdAndDown: {$mdAndDown}</div>
<div>lgAndDown: {$lgAndDown}</div>
<div>betweenSmAndMd: {$betweenSmAndMd}</div>
<div>lgAndUp: {$lgAndUp}</div>
<div>mdAndUp: {$mdAndUp}</div>
</div>
<div class="flex-none">
breakpointsTailwind:
<pre><code lang="json"
>{JSON.stringify(breakpointsTailwind, null, 2)}</code></pre>
</div>
</div>