Puse todos mis componentes en un div con fila flexible, pantalla w y centro de contenido y, por alguna razón, cuando entro en modo reactivo/móvil en el navegador, ocupa aproximadamente 2/3 de la pantalla y no puedo. t consigue que llene el espacio restante de la pantalla.
Aquí está el código para la Vista que contiene todos los componentes:
<template> <div class="flex-row h-screen w-screen content-center bg-gray-700"> <div class="flex w-screen h-5/6 content-center" id="splash"> <Splash /></div> <div class="flex bg-blue-800 w-screen h-5/6" id="skills"> <Skills /></div> <div class="flex bg-green-700 w-screen h-5/6" id="projects"></div> <div class="flex bg-pink-700 w-screen h-5/6" id="about"></div> </div> </template> <script> import Splash from '../components/Splash.vue'; import Skills from '../components/Skills.vue'; export default { name: "Home", components: { Splash, Skills }, data: function() { return { } } } </script>y termina luciendo así en el móvil:
https://i.stack.imgur.com/Y6fLt.png (Puse el fondo del contenedor div de la vista en gris para resaltar cuánto queda de la pantalla)
Por favor, ayúdenme porque no tengo ni idea. ¡Gracias a todos!
Puede usar: w-full en lugar de w-screen
Lo que verá en los documentos y los ejemplos de Tailwind, específicamente en la biblioteca de componentes de TailwindUI, es que crearán divs anidados que tienen un propósito específico.
Tendrán el div externo, el contenedor principal y aplicarán margen/relleno, luego un div anidado para un borde, o al revés. Luego, un div específicamente para una columna de fila flexible, luego divs internos para filas flexibles, etc. Es una estructura anidada. No intentan usar un div para lograr demasiadas cosas.
Deberías familiarizarte con Tailwind Play. Puede aprender mucho con esta herramienta, que es la herramienta oficial de juegos de Tailwind. https://play.tailwindcss.com/
Además, consulte tailwindui.com para ver su biblioteca de interfaz de usuario. Parte de su código, te lo muestran, léelo detenidamente. Vea el canal de Youtube de TailwindLabs. Es fantástico para aprender TW básico y avanzado.
Aquí hay una estrategia básica para ancho completo en dispositivos móviles y restringida a un punto de interrupción con contenido acolchado arriba.
<template> <!-- outer container --> <div class="container mx-auto sm:px-6 lg:px-8"> <!-- this would be your main flex container, through a border or anything --> <div class="flex flex-col justify-start w-full h-screen"> <!-- now define your child flex containers, cols or rows or define CSS grid--> <!-- you could put your nav or header here as you're in a flex col--> <header /> <!-- now define your horizontal layout for Splash, Skills, etc.--> <!-- or place your full height mobile content here. --> <div </div> </div> </template> Conseguir diseños correctos es complicado. TailwindUI y Tailwind Labs tienen una gran cantidad de contenido gratuito que puede ayudarlo a obtener la estructura externa correcta para que pueda concentrarse en el contenido interno. Además, hay muchos componentes de Tailwind disponibles gratuitamente que abordan este y otros problemas de los que puede aprender consejos y trucos.
https://tailwindcomponents.com/search?query=layouts ¡Buena suerte! marcus