<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??
You may try using transform:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>
But using only CSS is easier. All you need is two properties and you can get the code of many triangles from my online collection: https://css-generators.com/triangle-shapes/