Skip to content
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
README.md
index.js
package.json
screenshot.png

README.md

Tailwind CSS Debug Screens 📱

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

Demo

Install

Requires Tailwind v1.0 or higher.

  1. Install the plugin:
npm install tailwindcss-debug-screens --save-dev
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  //...
  plugins: [
    require('tailwindcss-debug-screens'),
  ]
}

Usage

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

<body class="debug-screens">

Make sure the class is only present during development. Here's an example of how you could do that in Craft CMS:

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

Custimization

You can customize the position and styles in the theme.debugScreens section of your tailwind.config.js file.

Position

The first item of the position configuration array can be top or bottom, the second item can be left or right.

// tailwind.config.js
module.exports = {
  theme: {
    debugScreens: {
      position: ['bottom', 'left'],
    },
  },
  plugins: [
    require('tailwindcss-debug-screens'),
  ],
}

Styles

Take a look at the index.js file to see all the default styles.

// tailwind.config.js
module.exports = {
  theme: {
    debugScreens: {
      style: {
        backgroundColor: '#C0FFEE',
        color: 'black',
        // ...
      },
    },
  },
  plugins: [
    require('tailwindcss-debug-screens'),
  ],
}
You can’t perform that action at this time.