Home

Awesome

Tailwind CSS Debug Screens 📱

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

Demo

<img src="screenshot.png" width="534">

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

Selector

Modify the debug element selector with the selector configuration option.

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