📐 Spacing — Padding

All-sides (p-*)

p-0
p-1
p-2
p-3
p-4
p-6
p-8
p-12
p-16

Horizontal (px-*) / Vertical (py-*)

px-0
px-2
px-4
px-6
px-8
px-12
px-16
py-0
py-2
py-4
py-6
py-8
py-12

Single sides (pt / pb / pl / pr)

pt-4
pt-8
pb-4
pb-8
pl-4
pl-8
pr-4
pr-8

📐 Spacing — Margin & Gap

Margin (m-* / mx-* / my-* / mt-* / mb-*)

m-0
m-1
m-2
m-4
m-6
m-8
m-auto
mx-auto
mx-4
mx-8
my-0
my-4
my-8
my-16
mt-4
mt-8
mb-4
mb-8

Gap (gap-* / gap-x-* / gap-y-*)

gap-1
gap-2
gap-4
gap-6
gap-8
gap-12
gap-x-1
gap-x-2
gap-x-4
gap-x-6
gap-x-8
gap-y-1
gap-y-2
gap-y-4
gap-y-6
gap-y-8

🔤 Typography — Font Size

text-xs — The quick brown fox
text-sm — The quick brown fox
text-base — The quick brown fox
text-lg — The quick brown fox
text-xl — The quick brown fox
text-2xl — The quick brown fox
text-3xl — The quick brown fox
text-4xl — The quick brown fox
text-5xl — The quick brown fox
text-6xl — The quick brown fox

🔤 Typography — Weight, Style, Decoration, Transform

Font Weight

font-thin
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold

Font Style

italic — The quick fox
not-italic — The quick fox

Text Decoration

The quick fox — underline
The quick fox — line-through
The quick fox — no-underline

Text Transform

sample text — uppercase
sample text — lowercase
sample text — capitalize
sample text — normal-case

🔤 Typography — Line Height, Letter Spacing, Alignment

Line Height (leading-*)

leading-none
Line two
Line three
leading-tight
Line two
Line three
leading-snug
Line two
Line three
leading-normal
Line two
Line three
leading-relaxed
Line two
Line three
leading-loose
Line two
Line three

Letter Spacing (tracking-*)

tracking-tighter — SAMPLE TEXT
tracking-tight — SAMPLE TEXT
tracking-normal — SAMPLE TEXT
tracking-wide — SAMPLE TEXT
tracking-wider — SAMPLE TEXT
tracking-widest — SAMPLE TEXT

Text Align

text-left — The quick brown fox jumps over the lazy dog.
text-center — The quick brown fox jumps over the lazy dog.
text-right — The quick brown fox jumps over the lazy dog.
text-justify — The quick brown fox jumps over the lazy dog.

🔤 Typography — Whitespace, Word Break, Text Overflow, Wrap

Whitespace

whitespace-normal
whitespace-nowrap
whitespace-pre
whitespace-pre-wrap

Word Break / Overflow Wrap

Superlongwordthatmightoverflow — break-normal
Superlongwordthatmightoverflow — break-words
Superlongwordthatmightoverflow — break-all
Superlongwordthatmightoverflow — break-keep

Text Overflow

text-ellipsis — The quick brown fox jumps over the lazy dog
text-clip — The quick brown fox jumps over the lazy dog

Text Wrap (Modern CSS)

text-balance — The quick brown fox jumps over the lazy dog with a very nice balance
text-pretty — The quick brown fox jumps over the lazy dog with a very nice balance
text-wrap — The quick brown fox jumps over the lazy dog with a very nice balance
text-nowrap — The quick brown fox jumps over the lazy dog with a very nice balance

🔤 Typography — Vertical Align, List Style, Color

Vertical Align

align-baseline align-top align-middle align-bottom

List Style

  1. list-decimal item one
  2. list-decimal item two

Text Color

text-white
text-black
text-inherit
text-current

📦 Display & Flexbox

Display

block
inline
inline-block
inline-flex
flex
grid
inline-grid
contents
table
table-cell
hidden (class omitted to stay visible)

Flex Direction & Wrap

A
B
C
flex-row
A
B
C
flex-col
A
B
C
flex-row-rev
A
B
C
flex-col-rev
A
B
C
flex-wrap
A
B
C
flex-nowrap

Align Items

A
B
C
items-start
A
B
C
items-center
A
B
C
items-end
A
B
C
items-stretch

Justify Content

A
B
C
justify-start
A
B
C
justify-center
A
B
C
justify-end
A
B
C
justify-between
A
B
C
justify-around

Flex Shorthand, Grow, Shrink, Self

flex-1
flex-auto
flex-none
flex-grow
flex-grow-0
flex-shrink
flex-shrink-0
self-auto
self-start
self-center
self-end
self-stretch

🔲 Grid

grid-cols-* (1, 2, 3, 4, 6, 12)

col 1
grid-cols-1
col 1
col 2
grid-cols-2
col 1
col 2
col 3
grid-cols-3
col 1
col 2
col 3
col 4
grid-cols-4
col 1
col 2
col 3
col 4
col 5
col 6
grid-cols-6

grid-rows-*

cell 1
cell 2
cell 3
cell 4
cell 5
cell 6

col-span-* & row-span-*

col-span-2
col-span-1
col-span-1
col-span-full
col-span-3
col-span-1

grid-flow-* / align-content / justify-items

grid-flow-row
grid-flow-col
grid-flow-dense
content-start
content-center
content-end
content-between
content-around
justify-items-start
justify-items-center
justify-items-end
justify-items-stretch

📏 Sizing

Width

w-full
w-auto
w-1-2
w-1-3
w-2-3
w-1-4
w-3-4

Min / Max Width

min-w-0
min-w-full
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-full
max-w-prose

Height / Min-Height / Max-Height

h-auto
h-full
min-h-0
min-h-full
max-h-full

Aspect Ratio

aspect-square
aspect-video
aspect-auto

Object Fit

object-cover
object-cover
object-contain
object-contain
object-fill
object-fill
object-none
object-none

🟦 Border

Border Width + Style (both needed for visible border)

border-0
0 solid
border
1px solid
border-2
2px solid
border-4
4px solid
border-8
8px solid

Border Style

border-solid
border-dashed
border-dotted
border-none

Border Radius (rounded-*)

rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full

Theme Border Colors

border-primary
border-secondary
border-accent
border-success
border-warning
border-danger
border-info

🎨 Background

Color

bg-white
bg-black
bg-transparent

Theme Background Colors

bg-primary
bg-secondary
bg-accent
bg-success
bg-warning
bg-danger
bg-info
bg-neutral

Background Size

bg-cover
bg-contain
bg-auto

Background Position

bg-center
bg-top
bg-bottom
bg-left
bg-right

Background Repeat & Attachment

bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-fixed
bg-local
bg-scroll

💠 Shadows

Box Shadow

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

Text Shadow

text-shadow-none
text-shadow-xs
text-shadow-sm
text-shadow
text-shadow-md
text-shadow-lg
text-shadow-xl
text-shadow-white

⚡ Transitions & Animation

Duration

Easing

🔍 Opacity & Overflow

Opacity

opacity-0
opacity-25
opacity-50
opacity-75
opacity-100

Overflow

overflow — long content here that goes beyond
overflow — long content here that goes beyond
overflow — long content here that goes beyond
overflow — long content here that goes beyond

Overflow X / Y

overflow-x-auto
overflow-x-visible
overflow-y-visible
overflow-x-hidden
overflow-x-scroll
overflow-y-auto
overflow-y-hidden
overflow-y-scroll

📌 Position & Z-index

Position

relative
absolute
fixed
sticky

Z-index

z-0
z-10
z-20
z-30
z-50

Inset / Top / Right / Bottom / Left

inset-0
top-0
top-full
top-auto
right-0
bottom-0
bottom-full
left-0

👁️ Visibility & Pointer Events

Visibility

visible
invisible (hidden but takes space)
(element after invisible)

Pointer Events

🖱️ Cursor & User Select

Cursor

cursor-pointer
cursor-default
cursor-not-allowed
cursor-wait

User Select

select-none — try to select this text
select-text — try to select this text
select-all — try to select this text
select-auto — try to select this text

🔲 Outline & Resize & Appearance

Outline

Outline Color

Resize

Appearance None (removes browser default styling)

🔗 Scroll & Isolation

Scroll Behavior

scroll-smooth — scroll inside here
scroll-auto — scroll inside here

Isolation

isolate (creates stacking context)
isolation-auto

✨ Modern CSS — Backdrop Blur & Accent Color

Backdrop Filter (frosted glass)

backdrop-blur-none
backdrop-blur-sm
backdrop-blur
backdrop-blur-md
backdrop-blur-lg
backdrop-blur-xl

Accent Color (styles checkboxes, radio, range natively)

accent-auto
accent-current
accent-inherit

🎨 Theme Colors — Text / Background / Border

bg-primary
text-primary
border-primary
bg-secondary
text-secondary
border-secondary
bg-accent
text-accent
border-accent
bg-neutral
text-neutral
border-neutral
bg-success
text-success
border-success
bg-warning
text-warning
border-warning
bg-danger
text-danger
border-danger
bg-info
text-info
border-info
bg-text
text-text
border-text
bg-text-muted
text-text-muted
border-text-muted
bg-text-heading
text-text-heading
border-text-heading
bg-text-inverse
text-text-inverse
border-text-inverse
bg-bg
text-bg
border-bg
bg-bg-subtle
text-bg-subtle
border-bg-subtle
bg-bg-inverse
text-bg-inverse
border-bg-inverse
bg-border
text-border
border-border

Light / Dark Variants

light
primary
dark
light
secondary
dark
light
accent
dark
light
success
dark
light
warning
dark
light
danger
dark
light
info
dark

📦 Class Coverage — Supplemental

Classes applied here to include them in compiled CSS.

ucm-w-screen ucm-grid-cols-12 ucm-col-span-4 ucm-col-span-6 ucm-grid-rows-1 ucm-grid-rows-3 ucm-grid-rows-4 ucm-row-span-1 ucm-row-span-2 ucm-row-span-3 ucm-row-span-full ucm-h-screen ucm-min-h-screen ucm-max-h-screen ucm-hidden

🚀 UCM Library — All Classes Tested

Total: 360 classes across 10 categories. Load the Starter Library via Libraries → Starter Library using “Add new” mode to get all classes into your database, then assign them to blocks in the editor.