⚡Zero dependencies · No build step

Utility-First CSS,
Straight in the Browser

Write leaf-* class names — styles get injected automatically.
No compilation. No config files. Just one script tag.

View on npm → GitHub ↗
index.html 
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js"></script>

<!-- Use anywhere -->
<div class="leaf-flex leaf-p-4 leaf-bg-blue leaf-rounded-lg leaf-text-white">
  Hello leaf-css!
</div>
🎨 Colors ✍️ Typography 📐 Flex & Grid 📱 Responsive 🌙 Dark Mode ✨ Animations 🎯 Pseudo-classes 🔢 Arbitrary Values 🌈 Gradients ⚙️ configure()
Colors

Color Palette

Use leaf-bg-* · leaf-text-* · leaf-border-*

Base colors

red
orange
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
amber
black
white

Light & dark variants

light-blue
blue
dark-blue
light-teal
teal
dark-teal
light-green
green
dark-green
light-purple
purple
dark-purple
light-rose
rose
dark-rose
light-indigo
indigo
dark-indigo

Numeric scales (100–900)

blue

100
200
300
400
500
600
700
800
900

green

100
200
300
400
500
600
700
800
900

red

100
200
300
400
500
600
700
800
900

purple

100
200
300
400
500
600
700
800
900

orange

100
200
300
400
500
600
700
800
900

teal

100
200
300
400
500
600
700
800
900

rose

100
200
300
400
500
600
700
800
900

indigo

100
200
300
400
500
600
700
800
900

gray

100
200
300
400
500
600
700
800
900

slate

100
200
300
400
500
600
700
800
900

zinc

100
200
300
400
500
600
700
800
900
Typography

Font Sizes & Styles

text-xs The quick brown fox jumps over the lazy dog
text-sm The quick brown fox jumps over the lazy dog
text-base The quick brown fox jumps over the lazy dog
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-5xl Heading

Text styles

Bold Light weight Italic text Underlined Line-through Uppercase Wide Semibold
Spacing & Borders

Padding · Margin · Radius · Border

Border radius scale

none
sm
md
lg
xl
2xl
full

Border styles

border
border-2
border-4
dashed
dotted
border-color

Shadows

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
Interactivity

Pseudo-classes

hover · focus · active · disabled

Layout

Flexbox & Grid

flex · justify-between · items-center

leaf-flex leaf-justify-between

grid-cols-3 + gap-4

1
2
3

col-span-2 · col-span-full

col-span-2
1
col-span-full

Responsive: grid-cols-1 → md:2 → lg:4

A
B
C
D
Responsive

Breakpoints

sm:640 · md:768 · lg:1024 · xl:1280 · 2xl:1536

Resize the window — this text changes size

Mobile: red · Tablet: yellow · Desktop: green
Block 1
Block 2
Block 3
📱 Mobile 📟 Tablet 🖥 Desktop
Arbitrary values

Custom Values

Pass any value directly with leaf-*-[value] syntax.

leaf-p-[30px] → padding: 30px
leaf-bg-[#ff6b6b] → custom hex color

leaf-text-[#9333ea] → custom text color

leaf-w-[320px] → fixed width
leaf-w-[calc(100%-40px)] → calc()
Animations & Transforms

Motion

Spinners

Pulse · Bounce

🍃

Scale on hover · Rotate on hover

↻
🖼 Zoom

Entrance animations

fade-in
slide-up
slide-left
slide-right
zoom-in
wiggle
Gradients

Linear · Three-color · Text

Linear gradients

primary → secondary
blue → purple
orange → pink
diagonal
brand → secondary
light-red → dark-red

Three color (via)

red → yellow → green
blue → purple → pink
success → primary
dark → mid → light blue

Gradient text

Gradient Text

Three Colors

🍃 leaf-css

configure()

Theming

Extend the default palette with your own tokens. Fully optional — defaults work out of the box. 

window.__leafConfig = {
  colors: {
    primary:   '#6366f1',
    secondary: '#8b5cf6',
    brand:     '#ff6b6b',
  },
  extend: {
    spacing:  { 13: '52px' },
    fontSizes: { hero: '72px' },
  },
};

Custom colors

primary
primary-dark
primary-light
secondary
brand
success
warning
danger

Custom font-size: text-hero

Aa

Custom spacing: p-13 → 52px

This uses leaf-p-13 — a custom spacing token via extend.spacing
MutationObserver

Dynamic DOM

Elements added after page load are automatically processed. Works with React, Vue, and any dynamic content.