A17 Tailwind Plugins

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

tailwind.config.js

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>:

document.html

<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:

.env

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.