Foundations
Authored at 1080p
Tailwind’s spacing scale, untouched. Every length is a plain px or rem at the 1080p design size — the game scales them for bigger screens, so nothing here may scale itself.
The scale
Unchanged from Tailwind 3. The preset does not extend or replace it: both apps already speak it fluently.
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
328rem
Why plain lengths
FiveM’s CEF renders at the game resolution with a device pixel ratio of 1, so at 4K a 300px panel covers a quarter of its 1080p area. The webview’s PostCSS pass rewrites every px and rem to
calc(N * var(--ui-px, 1px)) and sets --ui-px from the screen height. Switch the toolbar to NUI 1440p and the bars above grow by a third.Do
Size through classes and tokens:w-72, p-[var(--card-pad)], size-[var(--tick-size)]. The pass reaches them all, including tokens.css under node_modules/@fastrp/.Don’t
Inline pixels (style={{ width: 300 }}), lengths already wrapped in calc() or clamp(), or vw-based type: the pass never sees the first and scales the others twice or not at all.Component scalars
The few lengths the brand fixes, as custom properties. A component reads them so a size variant can override one locally.
--radius0.5rem
--tick-size7px
--tick-thickness1px
--glass-blur16px
--glass-opacity0.05
--glass-edge-opacity0.45
--panel-opacity0.82
--menu-block-opacity0.78
--menu-radius0.125rem
--menu-inset3rem
--menu-column30rem
--menu-gap0.375rem
--menu-row3.5rem
--card-pad1.25rem
--grid-size64px
--dot-size4px
--outline-width2px
// A size variant overrides the scalar for its subtree, never a hard number.
size: {
sm: '[--tick-size:5px]',
lg: '[--tick-size:12px] [--tick-thickness:2px]',
}