CSS Utilities
Tailwind-compatible utility classes for rapid styling.
Display
Control element display behavior.
(live preview unavailable)
1
2
3
rsx! {
div { style: "padding:1rem;color:#999;", "Component preview: pages/system/css#display" }
}1
<div style="display:flex;gap:8px"><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 1</div><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 2</div></div>Flexbox
Flex layout utility classes.
(live preview unavailable)
1
2
3
rsx! {
div { style: "padding:1rem;color:#999;", "Component preview: pages/system/css#flex" }
}1
<div style="display:flex;gap:8px"><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 1</div><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 2</div></div>Spacing
Spacing utility classes (padding, margin, gap).
(live preview unavailable)
1
2
3
rsx! {
div { style: "padding:1rem;color:#999;", "Component preview: pages/system/css#spacing" }
}1
<div style="display:flex;gap:8px"><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 1</div><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 2</div></div>Typography
Typography utility classes.
(live preview unavailable)
1
2
3
rsx! {
div { style: "padding:1rem;color:#999;", "Component preview: pages/system/css#typography" }
}1
<div style="display:flex;gap:8px"><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 1</div><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 2</div></div>Colors
Color utility classes.
(live preview unavailable)
1
2
3
rsx! {
div { style: "padding:1rem;color:#999;", "Component preview: pages/system/css#colors" }
}1
<div style="display:flex;gap:8px"><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 1</div><div style="padding:1rem;background:#e8edf3;border-radius:4px;color:#333">Flex 2</div></div>