Tailwind: Container - To prevent content from appearing all stretched out - Vue - 39

The next point we are going to deal with is to avoid all our content appearing stretched, which is what we have in the list view and the form based on what was created previously and thanks to the fact that we now have Tailwind installed in the project in Vue

To avoid the content appearing all stretched, we are going to place a container, which, as with Bootstrap, allows us to ensure that the content on large or medium screens does not appear all stretched and the size adapts proportionally to the available screen size; in Tailwind, we also have the container class for this purpose, but, unlike Bootstrap, it does not center the content, for this reason, we can set the margin to auto on the x axis for this purpose:

src/App.vue

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

Now with this we are going to use some media queries here and it will not take up all the space
We also place a margin on the y-axis so that it aligns at the top and bottom.