breakpoints

Tailwind CSS default breakpoints.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { breakpointsTailwind, breakpointsBootstrapV5, useBreakpoints, toPixels } from "@vizejs/composable/breakpoints";

Try it

Adapt guide detail to actual viewport breakpoints

Choose automatic guide detail from native media queries while preserving explicit user choices and a local review draft.

Open the interactive example

What to observe: Resize the preview across 480 and 768 CSS pixels. Matched lists every reached named breakpoint in ascending order; Active reports the largest. At exactly 768, At least and At most both match while Above and Below do not. The middle range includes 480 and excludes 768. Choose Full detail or Summary to override automatic detail without changing any readonly query result. The draft survives resizing.

useBreakpoints receives numeric CSS-pixel thresholds and uses the default real matchMedia capability. Named refs are mobile-first greater-or-equal results; current and active are readonly computed views. Comparison helpers cache their underlying queries. Strict greater/smaller use 0.02 px offsets, demonstrated here at integer viewport boundaries. Without ssrWidth, every query is false on the server, including smaller and smallerOrEqual; current is empty and active is null. The first browser render retains that fallback, then actual media results apply. An explicit ssrWidth would be an application-supplied assumption, not a measured client width, and must be consistent between server and client. This iframe's viewport can differ from the surrounding documentation page. Native select and draft state belong to the example. Scope disposal removes the media subscriptions; no host or media result is simulated.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { computed, ref } from "vue";
import { useBreakpoints } from "@vizejs/composable/breakpoints";

const { compact, expanded, current, active, greater, smaller, smallerOrEqual, between } =
  useBreakpoints({ compact: 480, expanded: 768 });
const aboveExpanded = greater("expanded");
const belowExpanded = smaller("expanded");
const atOrBelowExpanded = smallerOrEqual("expanded");
const middle = between("compact", "expanded");
const matchedNames = computed(() => current.value.join(", ") || "none");
const preference = ref<"automatic" | "summary" | "full">("automatic");
const showFull = computed(
  () => preference.value === "full" || (preference.value === "automatic" && expanded.value),
);
const draft = ref("");
</script>

<template>
  <div class="composable-example">
    <label>
      Guide detail
      <select v-model="preference">
        <option value="automatic">Automatic</option>
        <option value="summary">Summary</option>
        <option value="full">Full detail</option>
      </select>
    </label>
    <section aria-label="Responsive compiler guide">
      <strong>Review compiler output</strong>
      <p>Check the generated template and its diagnostics.</p>
      <p v-if="showFull">
        Compare the source locations and generated render calls before publishing.
      </p>
    </section>
    <label>
      Review draft
      <input v-model="draft" type="text" placeholder="Keep a local note while resizing" />
    </label>
    <output aria-live="polite">
      Matched: {{ matchedNames }} · Active: {{ active ?? "none" }} · Detail:
      {{ showFull ? "full" : "summary" }}
    </output>
    <dl class="breakpoint-readings">
      <div>
        <dt>At least 480 px</dt>
        <dd>{{ compact ? "yes" : "no" }}</dd>
      </div>
      <div>
        <dt>At least 768 px</dt>
        <dd>{{ expanded ? "yes" : "no" }}</dd>
      </div>
      <div>
        <dt>Above 768 px</dt>
        <dd>{{ aboveExpanded ? "yes" : "no" }}</dd>
      </div>
      <div>
        <dt>Below 768 px</dt>
        <dd>{{ belowExpanded ? "yes" : "no" }}</dd>
      </div>
      <div>
        <dt>At most 768 px</dt>
        <dd>{{ atOrBelowExpanded ? "yes" : "no" }}</dd>
      </div>
      <div>
        <dt>480 to below 768 px</dt>
        <dd>{{ middle ? "yes" : "no" }}</dd>
      </div>
    </dl>
    <p>
      These readonly results describe this preview's viewport, not the surrounding page. Resize it
      to cross 480 or 768 CSS pixels. Automatic shows full detail from 768 px; your explicit choice
      and draft remain unchanged.
    </p>
    <p>
      SSR starts with every query false, no matched names, and summary detail. The browser applies
      real media queries after the first render; the server does not know its width.
    </p>
  </div>
</template>

<style scoped>
.breakpoint-readings {
  display: grid;
  gap: 6px;
  margin: 0;

  & div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  & dd {
    margin: 0;
    font-weight: 600;
  }
}
</style>

Runtime contract

API

breakpointsTailwind

Tailwind CSS default breakpoints.

const breakpointsTailwind

breakpointsBootstrapV5

Bootstrap 5 default breakpoints.

const breakpointsBootstrapV5

useBreakpoints

Reactive, typed breakpoint helpers built on media queries. Breakpoint names are inferred from the map, so typos are compile errors. greater and smaller use fractional offsets (width > 767.98px) so adjacent breakpoints never overlap. With ssrWidth, the server evaluates each query arithmetically for deterministic, hydration-stable output. Subscriptions are released with the owning reactive scope.

function useBreakpoints<const Name extends string>( breakpoints: Breakpoints<Name> & { readonly [Reserved in ReservedBreakpointName]?: never }, options: UseBreakpointsOptions = {}, ): BreakpointsControls<Name>

toPixels

Convert a BreakpointValue to CSS pixels.

function toPixels(value: BreakpointValue, rootFontSize = 16): number

Types

UseBreakpointsOptions

Options for useBreakpoints.