Styles

Onlive UI also offers a set of pre-defined classes that can be used in environments where their use generates better performance. These classes are a shorthand method for the use of the css variables defined by the library and are named following the Tailwind library standard.

From CDN

<link rel="stylesheet" href="path/to/onlive-ui/dist/styles/all.css" />

<div class="ol-px-large ol-bg-red-500"></div>;

ES Module

import '@onlive.site/ui/dist/styles/all.css';

<div class="ol-px-large ol-bg-red-500"></div>;

Performance

Each set of classes is divided into groups according to the function it performs. This allows you to import separately.

From CDN

<link rel="stylesheet" href="path/to/onlive-ui/dist/styles/spacing.css" />
<link rel="stylesheet" href="path/to/onlive-ui/dist/styles/color.css" />

<div class="ol-px-large ol-bg-red-500"></div>;

ES Module

import '@onlive.site/ui/dist/styles/spacing.css';
import '@onlive.site/ui/dist/styles/color.css';

<div class="ol-px-large ol-bg-red-500"></div>;