Quick Start

Import the stylesheet and use utility classes in your markup:

import "ustatic-css";

Here’s a typical UI element built from utility classes:

Просмотр

Card title

Card description with style examples.

Button

Badge

Код

<div class="p-6 bg-white border border-gray-200 rounded max-w-96">
  <h3 class="text-lg font-bold text-gray-800">Card title</h3>
  <p class="text-gray-600 mt-2 mb-4">Card description with style examples.</p>
  <div class="flex items-center gap-2">
    <button
      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 cursor-pointer active:pulse"
    >
      <p>Button</p>
    </button>
    <span
      class="px-2 py-1 text-xs font-semibold text-red-600 bg-red-100 rounded"
    >
      Badge
    </span>
  </div>
</div>

More Examples

Animations and hover effects:

Просмотр

⚙️Loading…

Hover me

Push

Код

<div class="flex flex-wrap items-center gap-4">
  <div class="flex items-center gap-2">
    <span class="size-fit animation:spin-4">⚙️</span>
    <span>Loading…</span>
  </div>
  <div
    class="hover:lift inline-block p-4 bg-white border border-gray-200 rounded"
  >
    <p>Hover me</p>
  </div>
  <button
    class="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer active:pulse"
  >
    <p>Push</p>
  </button>
</div>

Colors and brightness:

All colors support brightness shades via a hyphen: bg-red-500, text-gray-600, border-blue-300.

Class Reference

Category	Example classes
Typography	text-sm, text-lg, font-bold, font-medium
Spacing	p-4, m-2, px-4, py-2, mt-2, gap-2
Flexbox	flex, flex-col, justify-between, items-center
Positioning	relative, absolute, top-0, right-0
Animations	blink, animation:spin-4, active:pulse, hover:lift
Sizing	w-full, max-w-96, h-32, size-fit