I've put all my components under a div with flex-row, w-screen and content-center and for some reason when I go on reactive/mobile mode on the browser it takes about 2/3 of the screen and I can't get it to fill up the remaining screen space.
Here is the code for the View that holds all the components:
<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>
and it ends up looking like this on mobile:
https://i.stack.imgur.com/Y6fLt.png (I put the background of the view's div container as gray to highlight how much is left of the screen)
Please help me out because I got no clue.. Thank you everyone!
You can use: w-full instead of w-screen
What you'll see in the docs and Tailwind examples, specifically in the component library of TailwindUI, is that they will create nested divs that each serve a specific purpose.
They'll have the outer div, parent container, and either apply margin/padding, then a nested div for a border, or the reverse. Then a div specifically for a flex row col, then inner divs for flex rows, etc. It's a nested structure. They don't try to use one div to accomplish too many things.
You should get familiar with Tailwind Play. You can learn a ton from this tool which is the official playground tool of Tailwind. https://play.tailwindcss.com/
Also, check out tailwindui.com for their UI library. Some of their code, they show you, read it carefully. See the TailwindLabs Youtube channel. It is fantastic for learning basic and advanced TW.
Here's a basic strategy for full width on mobile and constrained to a breakpoint with padded content above.
<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>
Getting layouts right are tricky. TailwindUI and Tailwind Labs have a lot of free content that can help you get the outer structure right so that you can focus on the inner content. Also, there are a lot of freely available Tailwind components that tackle this and other issues from which you can learn tips/tricks.
https://tailwindcomponents.com/search?query=layouts
Good luck!
Marcus