Tailwind: Cómo desplegar los breakpoints
Instalación del plugin "Tailwind Debug Screens" para visualizar el breakpoint de CSS durante el desarrollo
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 ...">