Tailwind: Cómo desplegar los breakpoints

Instalación del plugin "Tailwind Debug Screens" para visualizar el breakpoint de CSS durante el desarrollo

Tailwind: Cómo desplegar los breakpoints

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