SantyCSS SantyCSS v1.3.1

Spacing — add-padding / add-margin / gap

add-padding-8
add-padding-16
add-padding-24
add-padding-32
add-padding-x-24
add-padding-y-24

Borders — add-border / round-corners / make-pill

add-border-1
add-border-2 blue
add-border-4 green
add-border-left-6
add-border-y-4
border-dashed make-pill
make-circle

Typography — set-text / text-bold / text-center

set-text-48 text-bold

set-text-36 text-semibold color-blue-700

set-text-24 text-medium — Section heading

set-text-18 text-normal — Body text with line-height-relaxed for comfortable reading.

set-text-14 — Caption or secondary text

set-text-12 text-uppercase letter-space-wider

text-thin (100) text-light (300) text-normal (400) text-medium (500) text-semibold (600) text-bold (700) text-extra-bold (800) text-black-weight (900)
font-sans font-serif font-mono text-italic text-underline text-strikethrough text-uppercase text capitalize

Flexbox — make-flex / align / justify / flex-wrap

make-flex justify-between align-center

Item 1
Item 2
Item 3

make-flex flex-column gap-8

Stacked 1
Stacked 2
Stacked 3

make-flex flex-wrap gap-8 justify-center

Wrapped
Items
That
Wrap
Automatically

Grid — make-grid / grid-cols / gap / span-col

make-grid grid-cols-3 gap-16

1
2
3
span-col-2
6
span-col-full (spans all 3)

make-grid grid-cols-4 gap-12

A
B
C
D

Colors — color- / background- / border-color-

red-500
orange-500
amber-500
yellow-400
lime-500
green-500
teal-500
cyan-500
blue-500
indigo-500
violet-500
purple-500
pink-500
rose-500
gray-500
slate-500

Effects — Shadows, Opacity, Blur, Transforms

add-shadow-sm
add-shadow
add-shadow-md
add-shadow-lg
add-shadow-xl
opacity-100
opacity-75
opacity-50
opacity-25

Interactive — on-hover: / on-focus: / transition

group-hover: demo

Hover the parent to change all children

Animations

animate-spin
animate-pulse
animate-bounce
animate-fade-in
animate-slide-up
animate-zoom-in
skeleton

Components

Login Form

Forgot password?

Don't have an account? Sign up

Notification Feed

JD

Jane Doe commented on your post.

2 minutes ago

AB

Alice Brown liked your project.

15 minutes ago

CM

Charlie M. shared your post.

1 hour ago