Description
This plugin creates a tool for the bottom left of your screen which reveals
the current breakpoint, APP_ENV
and a grid column overlay with
toggle.
Setup
const { Setup, DevTools } = require('@area17/a17-tailwind-plugins');
module.exports = {
...
plugins: [Setup, DevTools],
theme: {
screens: {
xs: "0",
sm: "544px",
md: "650px",
lg: "990px",
xl: "1300px",
xxl: "1520px"
},
mainColWidths: {
xs: "auto",
sm: "auto",
md: "auto",
lg: "auto",
xl: "auto",
xxl: "1440px"
},
innerGutters: {
xs: "10px",
sm: "15px",
md: "20px",
lg: "30px",
xl: "40px",
xxl: "40px"
},
outerGutters: {
xs: "20px",
sm: "30px",
md: "40px",
lg: "40px",
xl: "40px",
xxl: "0px"
},
columnCount: {
xs: "4",
sm: "4",
md: "8",
lg: "12",
xl: "12",
xxl: "12"
},
}
...
};
Requires Setup
plugin with theme.innerGutters
,
theme.outerGutters
, theme.screens
,
theme.mainColWidths
and
theme.columnCount
configured.
Place the following HTML somewhere at the bottom of your DOM, outside of any
containers/wrappers, before the closing </body>
:
<div class="dev-tools">
<button class="dev-tools-toggle" onClick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden;"></button>
<div class="dev-tools-grid" hidden></div>
</div>
To (optionally) display the APP_ENV
you'll need a
.env
file:
APP_ENV=local
Demo
Its the little tool and breakpoint label at the bottom left of the screen ↙️.
Give the button a click - you'll see the grid columns overlay - useful for design validation.