tailwindcss-responsive-helper
v1.1.0
Published
A helpful plugin that shows the current screen size for testing responsive designs.
Downloads
16
Maintainers
hsnlbnanReadme
Tailwind CSS Screen Indicator
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.
Installation
Install the plugin via npm:
npm install tailwindcss-screen-indicatorThen add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-screen-indicator'),
// ...other plugins
],
};Usage/Examples
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.
How It Works
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.
Customization
Positioning
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;
}Styling
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;
}
Breakpoint Support
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
};Contributing
Contributions are welcome! Please open an issue or submit a pull request on GitHub.