如何使用 Tailwind CSS 不重叠组件？答案

【问题标题】：How to not overlap components using Tailwind CSS?如何使用 Tailwind CSS 不重叠组件？
【发布时间】：2021-02-20 23:23:03
【问题描述】：

我用一个简单的 css 类创建了一个名为 Header 的组件：

<template>
      <nav
    class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
  >
        <!-- Etc... -->
    </nav>

在 Home 组件中我注册了 Header 但它与 home 重叠：

<template>
  <div class="container">
    <Header />
    <div class="flex m-5">
      <h3>Hello</h3>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
    Header: () => import('@/components/Header.vue')
  }
}
</script>

Hello 落后了，即使在 Home 组件中包含 block class 也不起作用。有人可以帮忙吗？

【问题讨论】：

“重叠的家”是什么意思？显示屏幕或代码框
在这种情况下，我在 Home 组件中有一个字符串 Welcome HomePage，它与 Header 组件重叠

标签： tailwind-css

【解决方案1】：

您可以通过多种方式实现这一目标，但基于您已有的代码，您可以：

将top-0 类添加到您的标题中。这将确保您现在定位为fixed 的标题将粘在视口的顶部。
在容器中添加一个与标题高度相等的顶部填充类（例如pt-16）。

这里有一个live demo 供您参考。

【讨论】：