How to make pseudo line in tailwind?

Question

I have a block:

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

How to make vertical line on the left side of block using tailwind?

I try to achive this:

Answer 1

You can do it with to divs. You have to use flex box (flex) system to align the to divs next to each other. Then you can set the height h-[400] and the padding pl-[20]. pl-* means padding-left.

example

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

height:auto;

<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

I'm not sure if I understand your question well, but need to read tailwind docs to understand how tailwind works, so here is what I did I hope it's what you are looking for :

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

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

</div>