Helper / Utility Classes

Comprehensive reference for spacing, typography, display, layout, borders, shadows, sizing, positioning, overflow, color, and cursor utilities.

Spacing Utilities

Visual demonstration of padding and margin values.

Padding

p-1
p-2
p-3
p-4
p-6
p-8

Margin

m-1
m-2
m-3
m-4
m-6
m-8

Text Utilities

Alignment, transform, decoration, weight, and font style demos.

Text Alignment

left

The quick brown fox jumps over the lazy dog. This sample text demonstrates alignment.

center

The quick brown fox jumps over the lazy dog. This sample text demonstrates alignment.

right

The quick brown fox jumps over the lazy dog. This sample text demonstrates alignment.

justify

The quick brown fox jumps over the lazy dog. This sample text demonstrates alignment.

Text Transform

uppercase

sample text here

lowercase

sample text here

capitalize

sample text here

Text Decoration

underlineline-throughnone

Font Weight

light (300)normal (400)medium (500)semibold (600)bold (700)extrabold (800)

Font Style

italicnormal

Display Utilities

How each display type affects element layout.

block
Block A
Block B
inline-block
Inline-block A
Inline-block B
Inline-block C
inline
This is text with inline A and inline B elements inside.
flex
Flex A
Flex B
Flex C
grid (3 columns)
Grid A
Grid B
Grid C
hidden
The element below is hidden (display: none):
You cannot see me

Flex Utilities

Direction, justification, and alignment within flex containers.

Flex Direction

row
1
2
3
column
1
2
3
row-reverse
1
2
3
column-reverse
1
2
3

Justify Content

flex-start
A
B
C
center
A
B
C
flex-end
A
B
C
space-between
A
B
C
space-around
A
B
C
space-evenly
A
B
C

Align Items

flex-start
A
B
C
D
center
A
B
C
D
flex-end
A
B
C
D
stretch
A
B
C
D
baseline
A
B
C
D

Border Utilities

Widths, styles, radii, and themed border colors.

Border Width

1px
1px
2px
2px
4px
4px

Border Style

solid
solid
dashed
dashed
dotted
dotted

Border Radius

none
none
sm
sm
md
md
lg
lg
xl
xl
full
full

Border Colors

Accent
Success
Warning
Danger
Info

Shadow Utilities

Box shadow presets from subtle to dramatic.

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none

Opacity Utilities

Same element rendered at varying opacity levels.

100%
90%
75%
50%
25%
10%
0%

Sizing Utilities

Relative width and height demonstrations.

Width

w-1/4 (25%)
w-1/3 (33.33%)
w-1/2 (50%)
w-2/3 (66.67%)
w-3/4 (75%)
w-full (100%)

Height

h-1/4
h-1/3
h-1/2
h-2/3
h-3/4
h-full

Position Utilities

How each position value affects element placement within its container.

static
static
relative (top: 16, left: 16)
relative
absolute (top: 8, right: 8)
absolute
absolute
fixed (simulated)
fixed to bottom
sticky (scrollable demo)
sticky header
Scroll content line 1
Scroll content line 2
Scroll content line 3
Scroll content line 4
Scroll content line 5
Scroll content line 6

Overflow Utilities

How overflow settings clip or scroll overflowing content.

overflow-auto
This is a long block of content that deliberately exceeds the container height to demonstrate how the "overflow-auto" property handles overflowing content. It keeps going and going so that we can clearly see the behavior. More text here to ensure we overflow. And even more text. Keep scrolling if you can. The quick brown fox jumps over the lazy dog repeatedly to fill space.
overflow-hidden
This is a long block of content that deliberately exceeds the container height to demonstrate how the "overflow-hidden" property handles overflowing content. It keeps going and going so that we can clearly see the behavior. More text here to ensure we overflow. And even more text. Keep scrolling if you can. The quick brown fox jumps over the lazy dog repeatedly to fill space.
overflow-scroll
This is a long block of content that deliberately exceeds the container height to demonstrate how the "overflow-scroll" property handles overflowing content. It keeps going and going so that we can clearly see the behavior. More text here to ensure we overflow. And even more text. Keep scrolling if you can. The quick brown fox jumps over the lazy dog repeatedly to fill space.
overflow-visible
This is a long block of content that deliberately exceeds the container height to demonstrate how the "overflow-visible" property handles overflowing content. It keeps going and going so that we can clearly see the behavior. More text here to ensure we overflow. And even more text. Keep scrolling if you can. The quick brown fox jumps over the lazy dog repeatedly to fill space.

Color Utilities

Complete theme color reference for backgrounds, text, and borders.

Background Colors

Accent
Success
Warning
Danger
Info
Surface
Border
Background

Text Colors

Primary--text-primary
Secondary--text-secondary
Muted--text-muted
Accent--accent
Success--success
Warning--warning
Danger--danger
Info--info

Text Colors on Dark Background

Primary--text-primary
Secondary--text-secondary
Muted--text-muted
Accent--accent
Success--success
Warning--warning
Danger--danger
Info--info

Border Colors

Accent
Success
Warning
Danger
Info
Border

Cursor Utilities

Hover over each box to see the cursor type.

default
pointer
text
move
not-allowed
grab
crosshair
zoom-in