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).
Prefer shorthand axis utilities in Tailwind
Combine individual top/bottom or left/right utilities into single axis utilities (px, py, mx, my) when values are identical.
Bad example
| 1 | <div className="pt-6 pb-6 pl-4 pr-4 mt-2 mb-2"> |
| 2 | <header className="border-t border-b border-gray-200"> |
| 3 | Header Content |
| 4 | </header> |
| 5 | </div> |
Explanation (EN)
The code uses separate classes for top/bottom and left/right spacing with identical values (`pt-6 pb-6`, `pl-4 pr-4`). This is verbose and harder to scan.
Objašnjenje (HR)
Kod koristi zasebne klase za gornji/donji i lijevi/desni razmak s identičnim vrijednostima (`pt-6 pb-6`, `pl-4 pr-4`). To je preopširno i teže za čitanje.
Good example
| 1 | <div className="py-6 px-4 my-2"> |
| 2 | <header className="border-y border-gray-200"> |
| 3 | Header Content |
| 4 | </header> |
| 5 | </div> |
Explanation (EN)
Using shorthand axis utilities (`py-6`, `px-4`, `my-2`) reduces visual noise and clearly communicates that the spacing applies symmetrically to the axis.
Objašnjenje (HR)
Korištenje skraćenih osnih klasa (`py-6`, `px-4`, `my-2`) smanjuje vizualni šum i jasno komunicira da se razmak primjenjuje simetrično na os.
Exceptions / Tradeoffs (EN)
Only use axis shorthands when the values match; keep explicit sides when they differ.
Iznimke / Tradeoffi (HR)
Axis shorthand koristi samo kad su vrijednosti iste; zadrži eksplicitne strane kad se razlikuju.