debug-screens

Tailwind CSS

const plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(({ addComponents }) => {
addComponents({
'.debug-screens': {
'@apply before:bottom-0 before:left-0 before:fixed before:px-1 before:text-sm before:bg-black before:text-white before:shadow-xl before:content-["screen:_"] 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"]':
{},
'&:before': {
'z-index': '2147483647',
},
},
})
}),
],
}

Windi CSS

import { defineConfig } from 'windicss/helpers'
export default defineConfig({
shortcuts: {
'debug-screens': {
'@apply':
'before:bottom-0 before:left-0 before:fixed 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:_"]',
'&:before': {
'z-index': '2147483647',
},
},
},
})

Add to view

Blade (Laravel)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<body class="{{ config('app.env') === 'local' ? 'debug-screens' : '' }}">
</body>
</html>

Vue

<template>
<div :class="{ 'debug-screens': devMode }" />
</template>
<script setup lang="ts">
const devMode = process.env.NODE_ENV === 'development'
</script>
<script>
export default {
name: 'MyApp',
data() {
return {
devMode: process.env.NODE_ENV === 'development',
}
},
}
</script>