Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use gap only on flex/grid containers, and mind hidden-child behavior
Prefer gap for spacing between flex/grid children, but apply it only on actual flex/grid containers and account for the difference in how gap vs margin-based space utilities treat hidden children.
Bad example
| 1 | // Blindly replacing every space-x with gap-x |
| 2 | <div className="inline-block gap-x-2">...</div> |
Explanation (EN)
gap has no effect on a non-flex/non-grid element like inline-block, so the spacing silently disappears.
Objašnjenje (HR)
gap nema nikakav ucinak na elementu koji nije flex/grid (npr. inline-block), pa razmak tiho nestane.
Good example
| 1 | // gap only where there is a flex/grid context |
| 2 | <div className="flex items-center gap-x-2">...</div> |
| 3 | // keep space-* (margin-based) where no flex/grid container exists |
| 4 | <div className="inline-block space-x-2">...</div> |
Explanation (EN)
gap is used on the flex container where it works; the non-flex case keeps the margin-based space utility. This also avoids unexpected layout shifts because gap and space-* differ in how they treat hidden children.
Objašnjenje (HR)
gap se koristi na flex kontejneru gdje funkcionira; slucaj bez flexa zadrzava utility temeljen na marginama. Time se izbjegavaju neocekivani pomaci u rasporedu jer se gap i space-* razlikuju u tretiranju skrivene djece.
Notes (EN)
In Tailwind v4 space-* no longer accounts for hidden elements while gap does natively — pick the utility based on the layout behavior you actually want, not just to be consistent.
Bilješke (HR)
U Tailwindu v4 space-* vise ne uzima u obzir skrivene elemente, dok gap to radi nativno — odaberi utility prema zeljenom ponasanju rasporeda, a ne samo radi konzistentnosti.