PostCSS-powered · Zero runtime · v2.0

Style at the speed of thought.

Compose UIs with j-* utility classes. PostCSS scans your components and emits only what you use — stack breakpoints, themes, and states in a single class name.

Get Started View on GitHub

profile-card.tsxTSX

<div className="
  j-flex j-flex-col j-gap-16
  j-p-28 j-rounded-2xl j-border
  j-bg-gray-900
">
  <div className="j-flex j-items-center j-gap-12">
    <div className="j-w-44 j-h-44 j-rounded-full
      j-bg-pink-500" />
    <div>
      <p className="j-text-white j-font-semibold">
        Sarah Chen
      </p>
      <p className="j-text-gray-400 j-text-sm">
        UI Engineer
      </p>
    </div>
    <span className="j-ml-auto j-px-10 j-py-4
      j-rounded-full j-text-xs j-font-semibold
      j-bg-pink-500/20 j-text-pink-300">
      Pro
    </span>
  </div>
  <p className="j-text-gray-300 j-leading-relaxed">
    JamilCSS changed how I ship UI.
  </p>
  <button className="j-w-full j-py-10
    j-rounded-xl j-text-white j-font-semibold
    hover:j-opacity-80 j-transition">
    Follow
  </button>
</div>

renders

Sarah Chen

UI Engineer

Pro

JamilCSS changed how I ship UI.

Why JamilCSS

Everything you need.
Nothing you don't.

Built for developers who want full control without the complexity.

Performance

PostCSS compiler

Scans your JSX/TSX and compiles only the j-* classes you actually use. Zero dead CSS, zero overhead.

Any numeric value

j-p-16, j-w-200-rem, j-text-24-pt — any number works. No config file per value. Just write it.

Power

Stacked variants

md:dark:hover:j-bg-pink-600 — combine breakpoint, theme, and state in one class name.

Design

22 color families

Gray to stone, shades 50–950. Tailwind-compatible palette with opacity modifier: j-bg-pink-500/50.

Theming

Dark & light themes

Prefix j-dark: or j-light: to any utility. Toggle via .dark on <html> — no JS overhead.

Performance

Zero runtime

Pure CSS output — no JS bundle, no style injection. Works with React, Vue, Svelte, Astro, and any HTML.

Interactive Demo

See it work. Click anything.

Every component styled with real JamilCSS utility classes.

KB runtime

color families

utilities

Less to write. More to show.

Same result. Drastically less code.

verbose.css17 lines

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background-color: #1e293b;
  border-radius: 16px;
  border: 1px solid #334155;
}

.card:hover {
  border-color: #475569;
  box-shadow: 0 0 32px rgba(0,0,0,0.3);
}

.card__title {
  font-size: 18px;
  font-weight: 600;
  color: #f8fafc;
}

.card__body {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}

component.tsxJamilCSS

<div className="
  j-flex j-flex-col j-gap-16
  j-p-24 j-rounded-2xl j-border
  j-border-gray-700
  hover:j-border-gray-600
  hover:j-shadow-xl
  j-transition
">
  <h3 className="
    j-text-lg j-font-semibold
    j-text-white
  ">
    Title
  </h3>
  <p className="
    j-text-sm j-text-gray-400
    j-leading-relaxed
  ">
    Body text here.
  </p>
</div>

Theming

Dark & light theming.
One prefix away.

Add .dark to <html> — no JS, no runtime cost.

DarkLight

dark modeActive

Alex Kim

Developer

Utility-first CSS that just makes sense.

j-dark:j-bg-slate-900j-dark:j-text-whitej-dark:j-border-pink-500/20

light mode

Alex Kim

Developer

Utility-first CSS that just makes sense.

j-light:j-bg-whitej-light:j-text-gray-900j-light:j-border-gray-200

Community

Built in the open.

Open source, open to collaboration.

GitHub Stars

Weekly Downloads

Forks

Contributors

“Finally a utility framework that doesn't fight me. The stacked variants are a game changer.”

@dev_marco

Frontend Engineer

“Switched from Tailwind to JamilCSS for a project. Loved that any numeric value just works — j-w-237 and it's done.”

@celine_codes

UI Developer

“The PostCSS plugin is seamless. Zero config, zero runtime, zero complaints from my team.”

@raf_builds

Tech Lead

Star on GitHub

Color System

22 color families.

Shades 50–950 via j-bg-{color}-{shade}

gray

blue

red

green

yellow

orange

pink

purple

Animations

Built-in motion.

Fade, spin, pulse, bounce, ping — drop in animated utilities instantly. No keyframe authoring.

j-animate-fadein-500

j-animate-spin-2-s

j-animate-pulse-1-s

j-animate-bounce-800

j-animate-ping-600

j-animate-fadeout-400