gelbehexe/layout.blade.php

## layout.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Title</title>
    ...
</head>
<body>
...
content...
...
@env('local')
  <div class="breakpoint-indicator absolute left-0 top-0 right-0 min-h-2"></div>
@endenv
</body>
</html>

## tailwind.config.js
const _ = require('lodash')
const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')

module.exports = {
  ...
    plugins: [
      ...
        plugin(function({ addComponents, theme }) {
            if (process.env.NODE_ENV === 'production') {
                addComponents([
                    {
                        '.breakpoint-indicator': {
                            display: 'none !important'
                        },
                    },
                ],[])
                return
            }


            const screens = theme('screens', {})
            const colorNames = Object.keys(colors).filter(item => {
                if (['black','white'].includes(item)) {
                    return false
                }
                return typeof colors[item] === 'object';
            })

            let idx = 0;


            const mediaQueries = _.map(screens, width => {
                let color
                if (idx + 2 >= colorNames.length) {
                    color = '#000'
                } else {
                    const colorName = colorNames[idx++]

                    const colorObject = colors[colorName]

                    let colorSubtype = '700'
                    if (!colorObject.hasOwnProperty(colorSubtype)) {
                        colorSubtype = Object.keys(colorObject)[Object.keys(colorObject).length - 1]
                    }

                    color = colorObject[colorSubtype]
                }

                let screenKey = '(unknown)'
                for(let size in screens) {
                    // noinspection JSUnfilteredForInLoop
                    if (screens[size] === width) {
                        screenKey = size
                        break
                    }
                }

                return {
                    [`@media (min-width: ${width})`]: {
                        '.breakpoint-indicator': {
                            'background-color': color,
                        },
                        '.breakpoint-indicator:before': {
                            'content': `"${screenKey}"`,
                        },
                    },
                }
            })

            addComponents([
                {
                    '.breakpoint-indicator': {
                        'background-color': '#000',
                        'color': '#fff',
                        'font-size': '0.75rem',
                        'z-index': '99999',
                    },
                    '.breakpoint-indicator:before': {
                        'content': '"(smallest)"',
                    },
                },
                ...mediaQueries
            ],[])
        }),

    ],
}
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My Title</title>
	...
	</head>
	<body>
	...
	content...
	...
	@env('local')
	<div class="breakpoint-indicator absolute left-0 top-0 right-0 min-h-2"></div>
	@endenv
	</body>
	</html>
	const _ = require('lodash')
	const colors = require('tailwindcss/colors')
	const plugin = require('tailwindcss/plugin')

	module.exports = {
	...
	plugins: [
	...
	plugin(function({ addComponents, theme }) {
	if (process.env.NODE_ENV === 'production') {
	addComponents([
	{
	'.breakpoint-indicator': {
	display: 'none !important'
	},
	},
	],[])
	return
	}


	const screens = theme('screens', {})
	const colorNames = Object.keys(colors).filter(item => {
	if (['black','white'].includes(item)) {
	return false
	}
	return typeof colors[item] === 'object';
	})

	let idx = 0;


	const mediaQueries = _.map(screens, width => {
	let color
	if (idx + 2 >= colorNames.length) {
	color = '#000'
	} else {
	const colorName = colorNames[idx++]

	const colorObject = colors[colorName]

	let colorSubtype = '700'
	if (!colorObject.hasOwnProperty(colorSubtype)) {
	colorSubtype = Object.keys(colorObject)[Object.keys(colorObject).length - 1]
	}

	color = colorObject[colorSubtype]
	}

	let screenKey = '(unknown)'
	for(let size in screens) {
	// noinspection JSUnfilteredForInLoop
	if (screens[size] === width) {
	screenKey = size
	break
	}
	}

	return {
	[`@media (min-width: ${width})`]: {
	'.breakpoint-indicator': {
	'background-color': color,
	},
	'.breakpoint-indicator:before': {
	'content': `"${screenKey}"`,
	},
	},
	}
	})

	addComponents([
	{
	'.breakpoint-indicator': {
	'background-color': '#000',
	'color': '#fff',
	'font-size': '0.75rem',
	'z-index': '99999',
	},
	'.breakpoint-indicator:before': {
	'content': '"(smallest)"',
	},
	},
	...mediaQueries
	],[])
	}),

	],
	}