Zakaria Arrid

Under-the-hood TAILWIND 4 tips

1. CSS Vars and Arbitrary Calcs

<div className="[--container-gap:15px] lg:[--container-gap:25px] hover:[--container-gap:50px]">
    <div className="flex justify-center gap-[var(--container-gap)] p-4">
    <div className="bg-blue-500 size-16 rounded-lg"></div>
    <div className="bg-blue-500 size-16 rounded-lg"></div>
    <div className="bg-blue-500 size-16 rounded-lg"></div>
    <div className="bg-blue-500 size-16 rounded-lg"></div>
    <div className="bg-blue-500 size-16 rounded-lg"></div>
    </div>
</div>

I will add under-the-hood some tips gradually, day by day. .... by