TailwindCSS 不会将我的 VueJS 应用程序的宽度扩展到全屏

Posted 2023-03-07

【中文标题】TailwindCSS 不会将我的 VueJS 应用程序的宽度扩展到全屏

【英文标题】：TailwindCSS won't extend the width of my VueJS application to full screen

【发布时间】：2022-01-08 01:22:25

【问题描述】：

我已将所有组件放在一个带有 flex-row、w-screen 和 content-center 的 div 下，由于某种原因，当我在浏览器上进入响应式/移动模式时，它占据了大约 2/3 的屏幕，并且我无法让它填满剩余的屏幕空间。

下面是包含所有组件的视图代码：

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

它最终在移动设备上看起来像这样：

https://i.stack.imgur.com/Y6fLt.png（我将视图的 div 容器的背景设置为灰色以突出显示屏幕还剩多少）

请帮帮我，因为我不知道......谢谢大家！

【参考方案1】：

您可以使用：w-full 代替 w-screen

【讨论】：

首先感谢您的回复！不幸的是，虽然它提供了相同的结果，但我将所有 w-screens 更改为 w-full 没有任何改变..

【参考方案2】：

您将在文档和 Tailwind 示例中看到，特别是在 TailwindUI 的组件库中，它们将创建嵌套的 div，每个 div 都有特定的用途。

他们将拥有外部 div、父容器，并应用边距/填充，然后是嵌套的 div 作为边框，或者相反。然后是一个专门用于 flex 行 col 的 div，然后是用于 flex 行的内部 div，等等。它是一个嵌套结构。他们不会尝试使用一个 div 完成太多事情。

您应该熟悉 Tailwind Play。你可以从这个工具中学到很多东西，它是 Tailwind 的官方游乐场工具。 https://play.tailwindcss.com/

另外，请访问 tailwindui.com 了解他们的 UI 库。他们向您展示的一些代码，请仔细阅读。请参阅 TailwindLabs Youtube 频道。学习基础和高级 TW 非常棒。

这是在移动设备上实现全宽的基本策略，并被限制在上面有填充内容的断点上。

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

正确的布局很棘手。 TailwindUI 和 Tailwind Labs 有很多免费内容，可以帮助您正确构建外部结构，以便您可以专注于内部内容。此外，还有很多免费的 Tailwind 组件可以解决这个问题和其他问题，您可以从中学习技巧/窍门。https://tailwindcomponents.com/search?query=layouts 祝你好运！ 马库斯