Outline Style

Class	Properties
os-none	outline-style: none;
os-d	outline-style: dashed;
os-s	outline-style: solid;

This example showcases various outline styles: none, dashed, and solid. The element will have no outline, a dashed outline, and a solid outline, respectively.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-1 b-s bc-gray dim-16 oc-indigo oo-1 os-none rad-1"></div>
  <div class="b-1 b-s bc-gray dim-16 oc-indigo oo-1 os-d rad-1"></div>
  <div class="b-1 b-s bc-gray dim-16 oc-indigo oo-1 os-s rad-1"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:os-*,md:os-*, lg:os-*, and xxl:os-* allows targeting specific utilities in different viewports.

<div class="os-h md:os-s ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:os-* utility to override elements and change their values when hovering over them.

<div class="os-h h:os-s ..."></div>