    ⚡ UTILITY-FIRST  ·  ZERO DEPENDENCIES  ·  4KB RUNTIME
  

Style with classes.
No CSS required.

dnanoCSS scans your DOM, parses utility classes, and injects real CSS at runtime — just like Tailwind, but built from scratch with Vanilla JS.

See Live Demo View Examples

<!-- Write this in your HTML -->
<div class="dn-flex dn-items-center dn-justify-center
      dn-bg-primary dn-text-white dn-p-24 dn-rounded-12">
  dnanoCSS works! 🚀
</div>

<!-- dnanoCSS auto-generates this -->
.dn-bg-primary { background-color: #2563eb; }
.dn-rounded-12 { border-radius: 12px; }

HOW IT WORKS

5-Step Engine Pipeline

01

DOM Ready

Engine boots after DOMContentLoaded fires.

02

DOM Scan

Every element's classList is inspected for dn- prefixed classes.

03

Parse

Parser splits tokens, detects breakpoints, pseudo-states, and values.

04

Generate CSS

Real CSS rules are built and injected into a <style> tag.

05

Observe

MutationObserver watches for new nodes automatically.

FEATURES

Everything you need, nothing you don't.

🎨

Color Palette

30+ named colors including semantic tokens like primary, danger, success. Use any as bg, text, or border.

📱

Responsive Breakpoints

Prefix any utility with sm:, md:, lg: for responsive styles. Generates real @media queries.

🖱️

Pseudo-States

dn-hover-bg-primary, dn-focus-border-blue, dn-active-text-white — CSS pseudo-selectors built-in.

⚡

Stylesheet Injection

Generates real reusable CSS rules in a <style> tag — not inline styles. Each class processed only once.

🔭

MutationObserver

Automatically detects dynamically added elements and applies utility styles without re-scanning the whole DOM.

🧩

Modular Architecture

Separated into engine, parser, utilities, and constants — extend any layer independently.

UTILITIES

Quick Reference

LIVE DEMO

Everything styled with dnanoCSS

✅ Success — Component styled with dn-bg-success dn-text-white

❌ Error — Styled with dn-bg-danger dn-rounded-10 dn-p-20

⚠️ Warning — Styled with dn-bg-warning dn-text-black dn-p-20

🚀

Fast

Zero runtime overhead. CSS generated once, cached forever.

🎯

Precise

Any value, any property. No opinionated scale restrictions.

🧠

Smart

MutationObserver auto-handles dynamic content at runtime.

🔭 MutationObserver Live Test

Click the button to inject a new element dynamically. dnanoCSS will style it instantly — no re-init needed.

Style with classes. No CSS required.