For Readable HTML

<p>🫒</p> {/* this_is_a_delicious_olive */}

<p class='this_is_not_a_delicious_olive'>🫒</p>

npm i -D olivecss

Example.jsx


    export default function App() {
        return (
        <div>
            <h1>Hello Olive!</h1> {/* text-5xl font-bold text-green-600 */}
        </div>
        )
    }

Hello Olive!

How it works At build time, OliveCSS parses your code and automatically converts detected CSS comments into class and styles.

Vite

OliveCSS works well with Vite.

Tailwind

OliveCSS also works well with Tailwind.

Supports React, Vue, Svelte, Astro, Solid, Preact, Lit, ...

React Island

Key Features:

👉Automatic conversion
👉Supports major frameworks
👉Easy to integrate

Example:

{/* color:white; */}

style="color:white;"

{/* text-white */}

className="text-white"

{/* // double-slash for a comment */}

{/* double-slash for a comment */}

Vue Island

Key Features:

👉 Automatic conversion
👉 Supports major frameworks
👉 Easy to integrate

Example:

style="color:white;"

class="text-white"

Svelte Island

Key Features:

👉 Automatic conversion
👉 Supports major frameworks
👉 Easy to integrate

Example:

style="color:white;"

class="text-white"

Comment-based Syntax

OliveCSS lets you write CSS utilities directly in comments inside your HTML, JSX, or Svelte files. Simple and intuitive — no need for heavy configuration.

Zero Runtime Overhead

OliveCSS transforms your source code at build time. That means no runtime cost, smaller bundles, and faster rendering.

Framework Agnostic

Works with React, Vue, Svelte, SolidJS, and more. Just install and use.

Lightweight & Fast

Tiny package size with blazing fast transformation — optimized for developer productivity.

Open Source

Free, open source, and community-driven. Contribute and shape the future of CSS utilities.

GitHub →