TailwindCSS Justify Content not working in CSS Grid

Question

In Tailwind CSS, the justify content is not working. But when I change the code from grid-cols-3 to Vanilla CSS by adding a class and remove the tailwind grid-cols-3 utility class, let's say the new div class name is container, add the following code would actually work, which makes me so confusing:

.container {
  grid-template-columns: 100px 100px 100px;
} 

I've attached the tailwind file below:

<div class="grid h-[500px] w-[500px] grid-cols-3 justify-end bg-slate-100">
  <div class="h-[50px] w-[50px] bg-red-200">1</div>
  <div class="h-[50px] w-[50px] bg-orange-200">2</div>
  <div class="h-[50px] w-[50px] bg-yellow-200">3</div>
  <div class="h-[50px] w-[50px] bg-green-200">4</div>
  <div class="h-[50px] w-[50px] bg-blue-200">5</div>
  <div class="h-[50px] w-[50px] bg-indigo-200">6</div>
</div>

Answer 1

justify-end applies to the container (which has 3 equally sized columns that fits the whole width so it does not make sense here).

this is what you need: justify-items-end, which applies inside the columns.