Appearance

Class	Properties
a-auto	appearance: auto;
a-none	appearance: none;

Auto

This example sets the appearance to auto. The a-auto utility allows the element to use the default styling provided by the browser, which can vary based on the element type and the user’s operating system.

Send

<button class="a-auto px-5 py-1">Send</button>

None

This example sets the appearance to none. The a-none utility removes all default styling from the element.

Send

<button class="a-none px-5 py-1">Send</button>

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:a-*,md:a-*, lg:a-*, and xxl:a-* allows targeting specific utilities in different viewports.

<div class="a-none md:a-auto ..."></div>

Hover modifiers

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

<div class="a-none h:a-auto ..."></div>