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>
Edit this page on GitHub