Style at the speed of thought.

Write j-* utility classes. PostCSS scans your components and emits only what you use — breakpoints, themes, and states in one class name.

Get Started GitHub

profile-card.tsxTSX

<div className="j-flex j-flex-col j-gap-16
  j-p-24 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" />
    <p className="j-text-white j-font-semibold">
      Abdelhakim KHAOUITI
    </p>
    <span className="j-ml-auto j-px-10 j-py-4
      j-rounded-full j-text-xs
      j-bg-pink-500/20 j-text-pink-300">
      Pro
    </span>
  </div>

  <button className="j-w-full j-py-10 j-rounded-xl
    j-text-white hover:j-opacity-80 j-transition">
    Follow
  </button>

</div>

renders

Abdelhakim KHAOUITI

AI Software Engineer

Pro

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

✦Coming soon

Natural Language CSS

Describe styles the way you think — "text color red, size 12, bold" — and JamilCSS maps your intent to the right utility classes. CSS that reads like a conversation.

∞Core

Limitless by Design

No predefined value tables. No arbitrary-value hacks. Write j-w-237, j-p-48, j-text-23 and it just works. Every number, every unit — truly limitless.

⬡Roadmap

Endlessly Extensible

Stack variants, compose utilities, plug into any framework. JamilCSS scales from one component to a full design system — with limitless features still on the horizon.

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