Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.0 is finally live 🎉

Yumma CSS and Qwik

Setup Yumma CSS with Qwik.

Creating a new project

To create a new Qwik project, you need run the Qwik CLI in your terminal.

  1. Install Yumma CSS

    Install the Yumma CSS Library using a package manager.

    Installing dependencies...
    npm i yummacss

  2. Include yummacss in your main CSS file:

    In this case, we’re importing the minified version of Yumma CSS.

    src/global.css
    @import "yummacss/dist/yumma.min.css";

  3. Start development server

    You can also run npm start to start your application.

    Starting development server...
    npm run dev

  4. Done!

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

    src/routes/index.tsx
    import { component$ } from "@builder.io/qwik";
    import type { DocumentHead } from "@builder.io/qwik-city";
    

    export default component$(() => {
        return <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Qwik</h1>;
    });
    

    export const head: DocumentHead = {
        title: "Welcome to Qwik",
        meta: [
            {
                name: "description",
                content: "Qwik site description",
            },
        ],
    };

Clone this project

You can clone the project from the GitHub repository.

Cloning the project...
git clone https://github.com/yumma-lib/qwik-example.git