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

Get started with Yumma CSS

Yumma CSS works by scanning your project files to generate and clean up any unused styles, keeping your code as small as possible — no bloat at all!

Installation

Install Yumma CSS and integrate it with your favorite frameworks, such as React, Next.js or Astro, in a matter of seconds.

  1. Install Yumma CSS

    Add yummacss to your project.

    Installing dependencies...
    npm i yummacss -- --save-dev

  2. Configure your source paths

    Include the paths to all source files in yumma.config.js file.

    yumma.config.js
    module.exports = {
      source: ["./src/**/*.html"],
      output: "./src/styles.css",
    };

  3. Writing styles

    Run the watch command to generate styles in your CSS file.

    Building styles...
    npx yummacss watch

  4. Done!

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

    src/index.html
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/src/styles.css" />
      </head>
      <body>
        <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🤝 Node.js</h1>
      </body>
    </html>

What next?

Learn about Yumma CSS, and see how it works differently from other CSS frameworks.

Writing styles Learn how to build styles using Yumma CSS.
Building themes Learn how customize your design system.
Conditional styles Learn how to use and apply conditional styles.
Optimizing CSS Learn how to optimize your Yumma project.