Utilities

Kelas utilitas untuk styling cepat tanpa menulis CSS custom.

Spacing

Margin dan padding dengan skala spacing yang konsisten.

p-2
p-3
p-4
p-5
m-2
m-3
m-4
m-5

Display

Kontrol visibility dan display type.

d-block
d-inline
d-flex
d-none

Flexbox

Utilitas flexbox untuk alignment dan distribution.

Left
Center
Right
Item 1
Item 2
Item 3

CSS Grid

Utilitas CSS Grid untuk layout kompleks.

1
2
3
4
5
6

Colors

Sistem warna dengan semantic naming dan variants.

bg-primary-100
bg-success-100
bg-danger-100
bg-warning-100
bg-info-100

Shadows

Sistem shadow yang konsisten untuk depth dan elevation.

shadow-sm
shadow
shadow-md
shadow-lg

Typography

Utilitas untuk text styling dan sizing.

text-xs - Extra small
text-sm - Small
text-base - Base
text-lg - Large
text-xl - Extra large
text-2xl - 2X large
text-3xl - 3X large

Borders

Utilitas untuk border styling dan radius.

rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-full

Responsive Utilities

Utilitas responsif dengan breakpoint prefixes.

Responsive item 1
Responsive item 2
Responsive item 3

Interactions

Utilitas untuk hover, focus, dan state interactions.

Hover card
Focus me

Langkah Selanjutnya

Lihat Komponen Lihat Layout Coba Playground