Encontré un plugin llamado "Tailwind Debug Screens" que presenta en el ambiente de desarrollo los breakpoints para CSS, por default dice en la esquina inferior izquierda cosas como screen: md que significa que estamos usando el breakpoint md.
Instalación
npm install tailwindcss-debug-screens --save-dev
Posteriomente, en la sección module.exports del archivo tailwind.config.js se añade:
module.exports = {
// ...
plugins: [
require('tailwindcss-debug-screens')
]
// ...
}
De forma opcional se puede cambiar la posición del indicador, que normalmente esta abajo a la izquierda, a la posición que querramos (a mi me gusta arriba a la derecha, me parece más visible) con lo siguiente en el archivo tailwind.config.js:
theme: {
// ...
debugScreens: {
position: ['top', 'right'],
},
// ...
}
Finalmente, corremos npm:
$ npm run build
Uso
En la etiqueta body de nuestro HTML simplemente añadimos la clase debug-screens:
<body class="debug-screens ...">