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 ...">