Tailwindcss breakpoint inspector, initial idea from https://gist.github.com/jonsugar/6bce22bd7d3673294caad36046c2b7cb

README.md

Tailwindcss plugin that adds a small box in the lower right corner of the screen showing the current breakpoint

Uses a position: fixed after css pseudo element on the body, so no extra markeup, and it get the breakpoint list by itself.

breakpointInspector.js

export default function({addBase, theme}) {
  if (process.env.NODE_ENV === "production") return
  
  const screens = theme('screens', {})
  const breakpoints = Object.keys(screens)

  addBase({
    'body::after': {
      content: `"Current breakpoint default (< ${screens[breakpoints[0]]})"`,
      position: 'fixed',
      right: '.5rem', // could replace with theme('spacing.2', '.5rem'), same for most of the other values
      bottom: '.5rem',
      padding: '.5rem .5rem .5rem 2rem',
      background: 'no-repeat .5rem center / 1.25rem url(https://tailwindcss.com/favicon-32x32.png), #edf2f7',
      border: '1px solid #cbd5e0',
      color: '#d53f8c',
      fontSize: '.875rem',
      fontWeight: '600',
      zIndex: '99999',
    },
    ...breakpoints.reduce((acc, current) => {
      acc[`@media (min-width: ${screens[current]})`] = {
        'body::after': {
          content: `"Current breakpoint ${current}"`
        }
      }
      return acc
    }, {})
  })
}

generated.css

/* this is the generated css */
body::after {
  content: "Current breakpoint default (< 640px)";
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  background: no-repeat 0.5rem center / 1.25rem url(https://tailwindcss.com/favicon-32x32.png), #edf2f7;
  border: 1px solid #e2e8f0;
  color: #d53f8c;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 99999;
}

@media (min-width: 640px) {
  body::after {
    content: "Current breakpoint sm";
  }
}

@media (min-width: 768px) {
  body::after {
    content: "Current breakpoint md";
  }
}

@media (min-width: 1024px) {
  body::after {
    content: "Current breakpoint lg";
  }
}

@media (min-width: 1280px) {
  body::after {
    content: "Current breakpoint xl";
  }
}

tailwind.config.js

module.exports = {
  // ...
  
  plugins: [
    require('./breakpointInspector')
  ]
}

Box looks like this :

Nice work @Lelectrolux 👍