Skip to content

Instantly share code, notes, and snippets.

@gelbehexe

gelbehexe/layout.blade.php

Last active Apr 10, 2021
Embed
What would you like to do?
Generate an media breakpoint indicator bar for development
<!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
],[])
}),
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment