Splendid Labz

Intro

nudge lets you move elements towards the center by creating margin around it. By itself, it’s nothing different from using margin directly.

<div class="nudge [--nudge:1rem]"> ... </div>

<div class="m m-4"> ... </div>

Nudge Functional Utilities

We’ve built in functional utilities for nudge so you can use nudge like m and p with Tailwind.

<div class="nudge nudge-4"> ... </div>

<div class="m m-4"> ... </div>

Inner Radius Calculation

One main feature of nudge is the ability to calculate inner radius of an element. To enable this feature, you need to set a --radius variable to the enclosing element, and inner-radius to the nudged element.

<div class="[--radius:1rem]">
  <div class="nudge [--nudge:0.5rem] inner-radius"> ... </div>
</div>

Using Nudge with Pos and Fixed

nudge is built into pos and fixed so you can just set the --nudge variable without declaring the nudge class.

<div class="stack">
  <div class="pos-topleft [--nudge:0.5rem]"> ... </div>
</div>

<div class="stack">
  <div class="fixed-topleft [--nudge:0.5rem]"> ... </div>
</div>