Need help with tailwindcss-debug-screens?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jorenvanhee
165 Stars 8 Forks 16 Commits 1 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 149,432
JavaScr...
Laravel
CSS
webfont...
9 commits
# 106,602
PHP
Symfony
TypeScr...
algolia...
2 commits
# 241,595
Ruby
Elixir
Rails
HTML
1 commit

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
 tag.

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


Customization

You can customize this plugin in the

theme.debugScreens
section of your
tailwind.config.js
file.

Ignore screens

To ignore a specific screen (for instance dark mode), add the screen name to the

ignore
configuration array.
dark
is ignored by default.
// tailwind.config.js
module.exports = {
  theme: {
    debugScreens: {
      ignore: ['dark'],
    },
  },
  plugins: [
    require('tailwindcss-debug-screens'),
  ],
}

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'),
  ],
}

Prefix

Modify the debug label prefix with the

prefix
configuration option.
// tailwind.config.js
module.exports = {
  theme: {
    debugScreens: {
      prefix: 'screen: ',
    },
  },
  plugins: [
    require('tailwindcss-debug-screens'),
  ],
}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.