Tailwind CSS class .inset-y-0 / .inset-*-#

<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-0 h-4 bg-teal-400"></div>
</div>
<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-y-0 w-4 bg-teal-400"></div>
</div>
<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-x-0 h-4 bg-teal-400"></div>
</div>
<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-auto top-0 h-4 w-0 bg-teal-400"></div>
</div>
<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-y-auto top-0 h-4 w-4 bg-teal-400"></div>
</div>
<div class="relative h-16 w-16 bg-gray-400 m-2">
  <div class="absolute inset-x-auto h-4 w-4 bg-teal-400"></div>
</div>

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.inset-y-0 {
    top: 0;
    bottom: 0;
}
.inset-x-0 {
    right: 0;
    left: 0;
}
.inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}
.inset-y-auto {
    top: auto;
    bottom: auto;
}
.inset-x-auto {
    left: auto;
    right: auto;
}