Collapse arrow acts weird when padding is removed

[HOMA40K]

So, I want to make collapse item smaller, so it becomes the same size as other items, but I didn't find the way to change arrows height

<div tabindex="0" class="collapse collapse-arrow border border-base-300 bg-base-200 peer-checked:text-secondary-content">
         <input type="checkbox" class="peer min-h-0" />
         <div class="collapse-title text-xl font-medium p-0 min-h-0">
                Focus me to see content
         </div>
         <div class="collapse-content peer-checked:text-secondary-content">
                <p>tabindex="0" attribute is necessary to make the div focusable</p>
         </div>
</div>

[Vijaykv5]

Hi @HOMA40K
To adjust the collapse arrow's size in Tailwind CSS while maintaining consistency with other items, ensure the collapse item's padding is consistent across all elements. Also Make sure to customize the arrow's size directly through Tailwind's h-[size] and w-[size] utilities, ensuring it aligns properly within the collapse item.

[HOMA40K]

it seems that this arrow is completely different thing, because after adding padding it doesn't move even a bit

<div tabindex="0"
            class="collapse collapse-arrow border border-base-300 bg-base-200 peer-checked:text-secondary-content">
            <input type="checkbox" class="peer min-h-0" />
            <div class="collapse-title text-xl font-medium p-0 min-h-0">
                Focus me to see content
            </div>
            <div class="collapse-content peer-checked:text-secondary-content ">
                <p>tabindex="0" attribute is necessary to make the div focusable</p>
            </div>
        </div>

[Vijaykv5]

Does this fixes it? I hope you need the arrow to fixed after removing padding?
May you can be more specific on your issue? @HOMA40K

[HOMA40K]

No, I need to move this this arrow

[saadeghi]

I added after:!top-4 class to your code:
https://play.tailwindcss.com/Nhfn77BFVS

<div tabindex="0" class="collapse collapse-arrow border border-base-300 bg-base-200 peer-checked:text-secondary-content">
  <input type="checkbox" class="peer min-h-0" />
  <div class="collapse-title min-h-0 p-0 text-xl font-medium after:!top-4">Focus me to see content</div>
  <div class="collapse-content peer-checked:text-secondary-content">
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>

[HOMA40K]

Huge thanks to you