Tailwind Top Tip - How to display the current breakpoint

Showing the currently active Tailwind breakpoint streamlines building and debugging, allowing for rapid adjustments and a clearer understanding of how your designs adapt to different screen sizes.

In this post, you'll find examples of how to add this feature to vanilla HTML, React, Vue, and Svelte.

View the breakpoint visualiser in action.

Html

Simply add the following snippet to your HTML to visualise Tailwind breakpoints.

<div
  class="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
>
  <div class="block sm:hidden">xs</div>
  <div class="hidden sm:block md:hidden">sm</div>
  <div class="hidden md:block lg:hidden">md</div>
  <div class="hidden lg:block xl:hidden">lg</div>
  <div class="hidden xl:block 2xl:hidden">xl</div>
  <div class="hidden 2xl:block">2xl</div>
</div>

React

In React, use this component to display breakpoints. You can customize its position with Tailwind classes.

import React from 'react';

interface TailwindSizeDisplayProps {
  positionClasses?: string;
}

export const TailwindSizeDisplay: React.FC<TailwindSizeDisplayProps> = ({
  positionClasses = 'bottom-1 left-1', /// Change this to top-1 right-1 to move it to the top right
}) => {
  const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
  const breakpointClasses = {
    xs: 'block sm:hidden',
    sm: 'hidden sm:block md:hidden',
    md: 'hidden md:block lg:hidden',
    lg: 'hidden lg:block xl:hidden',
    xl: 'hidden xl:block 2xl:hidden',
    '2xl': 'hidden 2xl:block',
  };

  return (
    <div
      className={`fixed ${positionClasses} z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white`}
    >
      {breakpoints.map((bp) => (
        <div key={bp} className={breakpointClasses[bp]}>
          {bp}
        </div>
      ))}
    </div>
  );
};

export default TailwindSizeDisplay;

Svelte

For Svelte developers, integrating the Tailwind breakpoint display is straightforward.

<script>
  let positionClasses = 'bottom-1 left-1'; // Change this to top-1 right-1 to move it to the top right
  const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
  const breakpointClasses = {
    xs: 'block sm:hidden',
    sm: 'hidden sm:block md:hidden',
    md: 'hidden md:block lg:hidden',
    lg: 'hidden lg:block xl:hidden',
    xl: 'hidden xl:block 2xl:hidden',
    '2xl': 'hidden 2xl:block',
  };
</script>

<div
  class="{`fixed"
  ${positionClasses}
  z-50
  flex
  h-6
  w-6
  items-center
  justify-center
  rounded-full
  bg-gray-800
  p-3
  font-mono
  text-xs
  text-white`}
>
  {#each breakpoints as bp}
  <div class="{breakpointClasses[bp]}">{bp}</div>
  {/each}
</div>

Vue

Vue developers aren't left out.

<template>
  <div :class="`fixed ${positionClasses} z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white`">
    <div v-for="bp in breakpoints" :key="bp" :class="breakpointClasses[bp]"></div>
  </template>

<script>
export default {
  data() {
    return {
      positionClasses: 'bottom-1 left-1', // Change this to top-1 right-1 to move it to the top right
      breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
      breakpointClasses: {
        xs: 'block sm:hidden',
        sm: 'hidden sm:block md:hidden',
        md: 'hidden md:block lg:hidden',
        lg: 'hidden lg:block xl:hidden',
        xl: 'hidden xl:block 2xl:hidden',
        '2xl': 'hidden 2xl:block',
      },
    };
  },
};
</script>