如何在顺风中制作伪线？

Question

我有一个块：

<div class="height: 400px; padding-left: 20px"></div>

如何使用 tailwind 在块的左侧制作垂直线？

我努力做到这一点：

Answer 1

你可以用 div 来做。您必须使用 flex box (flex) 系统将 div 彼此对齐。然后你可以设置高度h-[400]和填充pl-[20]。 pl-* 表示 padding-left.

例子

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-[400px] p-2">
  <div class="bg-blue-700 w-1"></div>
  <div class="pl-[20px]">Hello</div>
</div>

高度：自动；

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-auto p-2">
  <div class="bg-blue-700 w-1"></div>
  <div class="pl-[20px]">Hello</div>
</div>

Answer 2

我不确定我是否理解你的问题，但需要阅读 tailwind docs 以了解 tailwind 的工作原理，所以这就是我所做的，我希望这是你正在寻找的：

<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen'>

<div class="h-[400px]  bg-green-300 w-[20px]"></div>

</div>

如何在顺风中制作伪线？

How to make pseudo line in tailwind?

tailwind-css

tailwind-3