Tailwind tab underline not complete filling - tailwind-css

Question

As you can see the underline is not complete filling the full length. I couldn't figure out why that is. This is made with tailwindCSS. Does anyone know where to find the full width for the deposit part?
My code:
function MyPage() {
const [currentTab, setCurrentTab] = useState<string>("deposit");
const [inputValue, setInputValue] = useState<string>("");
const [outputValue, setOutputValue] = useState<string>();
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}
return(
<div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
<ul className="flex flex-wrap -mb-px">
<li className="mr-2 ">
<button
onClick={() => {
setCurrentTab("withdrawal"),
currentTab != "withdrawal" ? setOutputValue("") : null;
}}
className={classNames(
currentTab == "withdrawal"
? "text-gray-100 border-gray-100 inline-block p-4 border-b-2 rounded-t-lg active"
: "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100"
)}
>
Withdrawal
</button>
</li>
<li className="mr-2 ">
<button
onClick={() => {
setCurrentTab("deposit"), currentTab != "deposit" ? setOutputValue("") : null;
}}
className={classNames(
currentTab == "deposit"
? " text-gray-100 border-gray-100 inline-block p-4 border-b-2 rounded-t-lg active"
: "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100 "
)}
aria-current="page"
>
Deposit
</button>
</li>
</ul>
</div>
)
}

Answer 1

mr-2 class for button's wrapper element <li className="mr-2"> creates margin on the right side of every li element of the loop - so your button cannot stretch on full width.
By adding last:mr-0 we're simply removing margin for the last child element of the loop. The example for this can be found here
<li className="mr-2 last:mr-0">
Compiled CSS for last:mr-0 would look like
.last\:mr-0:last-child {
margin-right: 0px;
}