CSS Variables

Use CSS custom properties to drive dynamic styles. Convention: --ui-<component>-<property>

dynamic.jsx

<!-- Static -->
<div class="ui-card" style="--ui-card-bg: #eff6ff;"></div>
<!-- Dynamic (React) -->
<div
  className="ui-card ui-elevated"
  style={{
    "--ui-card-bg": active ? "#020617" : "#fff",
    "--ui-card-scale": hovered ? "1.03" : "1",
  }}
/>

In this example, CSS variables are conditional:

--ui-card-bg — dark background (#020617) when active is true, otherwise white
--ui-card-scale — slight scale-up (1.03) on hover, otherwise normal size (1)

Why this approach? Instead of juggling conditional Tailwind classes like bg-slate-950 vs bg-white, you simply change the variable value. The component's CSS consumes these variables internally, so styles update automatically—no extra class logic needed.