Tailwind CSS Debug Screens 📱

Ken's Contributions

Reported a bug on breakpoints overlapping in Tailwind CSS v4 (#31).

More contributions on GitHub.

About

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

Features

Shows the currently active screen (responsive breakpoint).
Customizable class name, position, and prefix.
Works with Tailwind CSS v1 to v4.

Installation

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

Usage

Add the plugin to your main style.css file:

@plugin "tailwindcss-debug-screens";

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

<body class="debug-screens"></body>

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;
}

Demo

You can see the demo of this project here.