Alternative tailwindcss-debug-screens in Windi CSS.
Source: https://github.com/jorenvanhee/tailwindcss-debug-screens
- Zero dependencies
- Really fully customizable
- No need to install any additional dependencies
- Just copy and paste it
See the Demo here.
Base class names:
before:change-position-y-0 before:change-position-x-0 before:fixed before:z-[2147483647] before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl @sm:before:content-["screen:sm"] @md:before:content-["screen:md"] @lg:before:content-["screen:lg"] @xl:before:content-["screen:xl"] @2xl:before:content-["screen:2xl"] <sm:before:content-["screen:none"]
Important
- Change
change-position-ytotoporbottom. - Change
change-position-xtoleftorright. 2147483647is the max value of CSSz-index. See this answer for more details.
Just paste the Base class names above to your body or div or any other HTML element that you want.
Example
<body class='before:bottom-0 before:left-0 before:fixed before:z-[2147483647] before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl @sm:before:content-["screen:sm"] @md:before:content-["screen:md"] @lg:before:content-["screen:lg"] @xl:before:content-["screen:xl"] @2xl:before:content-["screen:2xl"] <sm:before:content-["screen:none"]'>
<!-- Your code -->
</body>Important to use single quote (') instead double quotes (") to wrap the attribute class.
Hey! But it looks dirty. is there a cleaner and neater way?
Yes. You can put the Base class names to shortcuts field in windi.config.js file.
windi.config.js
export default {
shortcuts: {
"debug-screens": 'before:bottom-0 before:left-0 before:fixed before:z-[2147483647] before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl @sm:before:content-["screen:sm"] @md:before:content-["screen:md"] @lg:before:content-["screen:lg"] @xl:before:content-["screen:xl"] @2xl:before:content-["screen:2xl"] <sm:before:content-["screen:none"]'
}
}and then use it in your HTML element.
Example
<body class="debug-screens">
<!-- Your code -->
</body>Make sure the class is only present during development.
<body class={ devMode ? 'debug-screens' : '' }>Watch this issue to follow any update about the availability of tailwindcss-debug-screens as a Windi CSS plugin.