Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: Tailwind CSS / React
tailwindnamingreadabilityutility-first
Prefer inline utility mapping over naming every Tailwind class
Extracting each Tailwind combination into a named constant defeats Tailwind's locality benefit; map variant-to-classes at the point of use instead.
PR: hegnar-zephr-components · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codetsx
| 1 | className={clsx(isActive ? theme.navItemActiveClass : theme.navItemInactiveHoverClass)} |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | className={clsx( |
| 2 | isActive && productValue({ finansavisen: 'bg-blue-500', kapital: 'bg-gray-900/50', motor: 'bg-gray-600' }), |
| 3 | !isActive && productValue({ finansavisen: 'hover:bg-blue-600', kapital: 'hover:bg-gray-900/20', motor: 'hover:bg-gray-700' }) |
| 4 | )} |
Explanation (EN)
Objašnjenje (HR)