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:

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

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

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

3. Add the class debug-screens to your tag:

`html

`

$3

#### Laravel

`twig

`

#### Craft CMS

`twig

`

Customization

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

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