Debug Grid Tailwind

debug-grid.scss

.debug-grid {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100000;
  display: none;
  user-select: none;

  .col-span-1 {
    height: 100vh;
    text-align: center;
    position: relative;
    span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      display: inline-block;
      color: rgba(black, 0.15);
      padding-top: 10px;
      font-size: 10px;
      font-family: 'Arial', 'Helvetica', sans-serif;
    }
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      border-left: 1px solid rgba(black, 0.05);
      border-right: 1px solid rgba(black, 0.05);
      height: 100vh;
    }
    &:nth-child(even) {
      background-color: rgba(#b63737, 0.05);
    }
    &:nth-child(odd) {
      background-color: rgba(#b63737, 0.1);
    }
  }
}

debug_grid.antlers.html

<div class="js-debug-grid debug-grid">
  <div class="container">
    <div class="grid-cols-12 gap-20 grid md:hidden">
      <div class="col-span-1"><span>1</span></div>
      <div class="col-span-1"><span>2</span></div>
      <div class="col-span-1"><span>3</span></div>
      <div class="col-span-1"><span>4</span></div>
      <div class="col-span-1"><span>5</span></div>
      <div class="col-span-1"><span>6</span></div>
      <div class="col-span-1"><span>7</span></div>
      <div class="col-span-1"><span>8</span></div>
      <div class="col-span-1"><span>9</span></div>
      <div class="col-span-1"><span>10</span></div>
      <div class="col-span-1"><span>11</span></div>
      <div class="col-span-1"><span>12</span></div>
    </div>
    <div class="grid-cols-24 gap-20 hidden md:grid">
      <div class="col-span-1"><span>1</span></div>
      <div class="col-span-1"><span>2</span></div>
      <div class="col-span-1"><span>3</span></div>
      <div class="col-span-1"><span>4</span></div>
      <div class="col-span-1"><span>5</span></div>
      <div class="col-span-1"><span>6</span></div>
      <div class="col-span-1"><span>7</span></div>
      <div class="col-span-1"><span>8</span></div>
      <div class="col-span-1"><span>9</span></div>
      <div class="col-span-1"><span>10</span></div>
      <div class="col-span-1"><span>11</span></div>
      <div class="col-span-1"><span>12</span></div>
      <div class="col-span-1"><span>13</span></div>
      <div class="col-span-1"><span>14</span></div>
      <div class="col-span-1"><span>15</span></div>
      <div class="col-span-1"><span>16</span></div>
      <div class="col-span-1"><span>17</span></div>
      <div class="col-span-1"><span>18</span></div>
      <div class="col-span-1"><span>19</span></div>
      <div class="col-span-1"><span>20</span></div>
      <div class="col-span-1"><span>21</span></div>
      <div class="col-span-1"><span>22</span></div>
      <div class="col-span-1"><span>23</span></div>
      <div class="col-span-1"><span>24</span></div>
    </div>
  </div>
</div>

DebugGrid.js

import isNil from 'lodash/isNil'

export default class DebugGrid {
  constructor() {
    this.debugGrid = document.querySelector('.js-debug-grid')
    this.gridVisible = false
  }

  init() {
    if (!isNil(this.debugGrid)) {
      document.addEventListener('keydown', (e) => {
        if (e.key === 'g' && e.ctrlKey) {
          this.handleToggleGrid()
        }
      })
    }
  }

  handleToggleGrid = () => {
    if (this.gridVisible) {
      this.debugGrid.style.display = 'none'
      this.gridVisible = false
    } else {
      this.debugGrid.style.display = 'block'
      this.gridVisible = true
    }
  }
}