如何创建具有tailwindcss和动态高度的部分英雄答案

【问题标题】：How can i create a section hero with tailwindcss and dynamic height如何创建具有tailwindcss和动态高度的部分英雄
【发布时间】：2021-09-02 01:25:01
【问题描述】：

我怎样才能使用tailwindcss（如屏幕截图/代码框示例）创建一个部分英雄（具有动态高度和内部容器）？红色部分必须是全屏宽度。

section hero image sample

section hero codebox sample

section hero tailwind sample

here you can find the solution in bootstrap/cssm but i cant do it with tailwind

and here is the solution with tailwind css

and here you can get a full width hero with inner container

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您没有提供太多信息。我假设您需要一个可以根据屏幕自行调整的高度。

<div class="h-1/4">
Dynamic height according to screen height
</div>

编辑：

<html>
  <head>
    <title>tailwind section hero</title>
    <meta charset="UTF-8" />
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="container relative mx-auto">
      <h1 class="text-7xl my-4">headline1</h1>
      <p class="text-2xl my-4">this is a text</p>
      <p class="text-2xl my-4">this is a text</p>
      <p class="text-2xl my-4">this is a text</p>
      <div class="w-screen bg-red-500">
        <h3 class="text-5xl">section hero</h3>
        <p>text...</p>
      </div>
      <p class="text-2xl my-4">this is a text</p>
      <p class="text-2xl my-4">this is a text</p>
      <p class="text-2xl my-4">this is a text</p>
    </div>
  </body>
</html>

codepen 链接：https://codepen.io/gouravthakur39/pen/mdWvNOq

不要在容器本身上应用填充。

【讨论】：

如果我正在查看您的 codepen 示例，红色部分不是 100% 宽度。它从文本开始，但必须从屏幕左侧开始。
我在 boostrap/css 中添加了更多示例和解决方案。