Tailwind CSS Debug Screens 📱

A Tailwind CSS component that shows the currently active screen (responsive breakpoint).

Demo

[!NOTE] Docs for Tailwind CSS v1, v2 & v3 can be found here.

Install

Requires Tailwind v4.0 or higher.

1. Install the plugin:

npm install tailwindcss-debug-screens --save-dev

1. Add the plugin to your main style.css file:

  @import "tailwindcss";
+ @plugin "tailwindcss-debug-screens";

1. Add the class debug-screens to your <body> tag:

<body class="debug-screens">

Disable in production

Laravel

<body class="{{ app()->isLocal() ? 'debug-screens' : '' }}">

Craft CMS

<body class="{{ devMode ? 'debug-screens' : '' }}">

Customization

You can customize this plugin by using the following options when registering the plugin.

@import "tailwindcss";
@plugin "tailwindcss-debug-screens" {
  className: 'debug-screens';
  position: 'bottom, left';
  prefix: 'screen: ';
}

Custom Breakpoints

When defining custom breakpoints, it can affect their order resulting in the component displaying an incorrect value or not updating on resize.

To ensure breakpoints are received in the user-defined order, it may be necessary to add breakpoint-*: initial in your breakpoint definitions. This is also recommended in the official Tailwind documentation.

@theme {
  --breakpoint-*: initial;
  --breakpoint-xs: 360px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 1920px;
}