Skip to content
Get ready for the next version of Yumma CSS, which is going to be amazing!

Yumma CSS and Preact

How to add Yumma CSS to your project with Preact.


  1. Install Yumma CSS:

    Install the Yumma CSS Library using a package manager.

    Installing dependencies...
    npm i yummacss@latest
  2. Add yummacss in your main CSS file:

    src/syle.css
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";
  3. Start development server

    You can also run npm start to start your application.

    Terminal
    npm run dev
  4. Use Yumma CSS in your project:

    You’re all set to start using Yumma CSS utility classes in your project.

    src/Home/index.tsx
    export function Home() {
    return (
    <div class="h-1/1 ins">
    <h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Preact</h1>
    </div>
    );
    }

Project example

If you’re having trouble with Yumma CSS, clone this Preact example.

  1. Cloning repository

    Cloning repository...
    git clone https://github.com/yumma-lib/preact-yummacss-example.git
  2. Installing dependencies

    Installing dependencies...
    npm install
  3. Start development server

    Terminal
    npm run dev