Outline Offset

Controls the offset of an element’s outline.

Class	Properties
oo-0	outline-offset: 0px;
oo-1	outline-offset: 1px;
oo-2	outline-offset: 2px;
oo-3	outline-offset: 3px;
oo-4	outline-offset: 4px;

<div class="d-g g-16 gtc-2">
    <button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-2 os-s px-5 py-1 rad-1">Subscribe</button>
    <button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-4 os-s px-5 py-1 rad-1">Subscribe</button>
</div>

---

Using breakpoints

Using responsive breakpoints like sm:oo-*, md:oo-*, lg:oo-*, and xxl:oo-* allows targeting specific utilities in different viewports.

<div class="oo-1 md:oo-2 ..."></div>

Using variants

Using :hover variants such as h:oo-* allows you to override elements and change their values when hovering over them.

<div class="oo-1 h:oo-2 ..."></div>