Tailwind: Container - Para evitar que el contenido aparezca todo alargado - Vue - 39

▶

El siguiente punto que vamos a tratar es evitar que todo nuestro contenido aparezca alargado que es lo que tenemos en la vista de listado y el formulario en base a lo creado anteriormente y gracias a que ahora tenemos Tailwind instalado en el proyecto en Vue

Para evitar que el contenido aparezca todo alargado, vamos a colocar un container, que al igual que ocurre con Bootstrap, nos permite que el contenido en pantallas grandes o medianas no aparezca todo alargado y el tamaño se adapta proporcionalmente al tamaño de pantalla disponibles; en Tailwind, tenemos también la clase container para tal fin, pero, a diferencia de Bootstrap no centra el contenido, por tal motivo, podemos colocar el margen en auto en el eje x para tal fin:

src/App.vue

<div class="container mx-auto my-3">
 <router-view></router-view>
</div>

Ya con esto vamos a utilizar aquí unos media queries y no va a ocupar todo el espacio

También colocamos un margen en el eje y para que alinea en el top y bottom.