A Tailwind CSS plugin that displays the current screen breakpoint label (e.g., xs, sm, md, lg, xl, 2xl) in the corner of your page. This helps developers quickly identify the active breakpoint while working on responsive designs.
Install the plugin via npm:
npm install tailwindcss-responsive-helperThen add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-screen-indicator'),
// ...other plugins
],
};To display the screen indicator, add the debug-screens class to your element:
<body class="debug-screens">
<!-- Your content -->
</body>The indicator will now appear in the corner of your page, showing the current Tailwind CSS breakpoint label.
The plugin creates a pseudo-element (::before) on the <body> tag that displays the current breakpoint label based on your Tailwind CSS configuration. It listens to screen size changes and updates the label accordingly.
By default, the indicator appears at the bottom-right corner of the page. You can customize its position by overriding the CSS styles:
/* Your custom CSS */
body::before {
bottom: auto;
top: 1rem;
right: auto;
left: 1rem;
}To customize the appearance, you can override the default styles in your CSS:
/* Your custom CSS */
body::before {
background-color: rgba(0, 0, 0, 0.8);
color: #ffcc00;
padding: 1rem;
font-size: 1rem;
border-radius: 0.5rem;
}
The plugin automatically detects all breakpoints defined in your tailwind.config.js, including custom screen sizes:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
xs: '460px',
'3xl': '1921px',
// ...other custom screens
},
},
},
// ...other configurations
};Contributions are welcome! Please open an issue or submit a pull request on GitHub.