@visshnnu-tejaa/snapcss

A lightweight utility-first runtime CSS engine. No build step required — works entirely in the browser, like TailwindCSS but at runtime.

Features

• Zero build step — drop a script tag and go
• Utility-first class names (Tailwind-compatible syntax)
• Responsive breakpoints (sm:, md:, lg:, xl:, 2xl:)
• Dark mode support (dark:)
• State variants (hover:, focus:, focus-visible:, active:)
• Group hover (group / group-hover:)
• Structural modifiers (disabled:, first:, last:)
• Space between utilities (space-x-*, space-y-*)
• Dynamic DOM support via MutationObserver
• Themeable via design tokens

Installation

npm

npm install @visshnnu-tejaa/snapcss

import { init } from "@visshnnu-tejaa/snapcss";
init();

CDN (browser)

Drop one Script tag - no npm, no builder, no config needed. Auto initialization on DOMContentLoaded

<!-- unpkg -->
<script src="https://unpkg.com/@visshnnu-tejaa/snapcss/dist/snapcss.min.js"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@visshnnu-tejaa/snapcss/dist/snapcss.min.js"></script>

The global window.SnapCSS is also exposed if you need to call SnapCSS.init() manually

The script auto-initialises on DOMContentLoaded — no extra code needed.

Usage

Add utility classes to any element:

<div class="p-8 bg-cyan-500 text-white rounded-xl hover:bg-violet-500">
  Hello snapcss
</div>

Custom Theme

import { init } from "@visshnnu-tejaa/snapcss";

init({
  theme: {
    colors: {
      brand: { 500: "#22d3ee" },
    },
  },
});

Development

npm install
npm run build        # compile npm package to dist/
npm run test         # run test suite
npm run playground   # local playground server

License

MIT © Visshnnu Tejaa