Skip to content

Installation

Yumma CSS is a CSS framework packed with a set of abbreviated utility classes for building faster and more maintainable UIs.

Installation guide

Yumma CSS comes with the Yumma CLI, a powerful tool that’s a breeze to set up and takes no time or effort for production-ready projects.

  1. Install Yumma CSS

    Add yummacss to your project.

    Terminal
    pnpm add yummacss -D

  2. Initialize configuration

    Create a configuration file in your project.

    Terminal
    pnpx yummacss init
  3. Set up configuration

    Specify the locations of all your project files in the config file.

    yumma.config.js
    export default {
    source: ["./src/**/*.{ts,tsx}"],
    output: "./src/styles.css",
    buildOptions: {
    reset: true,
    minify: false,
    },
    };
  4. Build styles

    You can now start generating your CSS with the build or watch command.

    Terminal
    pnpx yummacss build

Framework guides

Yumma CSS works with any framework, seriously! Try it out with your favorite one.

Next steps

Take your first steps toward mastering Yumma CSS and its incredible core features.

Styling elements: Learn how to style elements using Yumma CSS.
Variants: Learn how to use variants like hover and focus in Yumma CSS.
Responsive Design: Learn how to make responsive designs with Yumma CSS.
Configuration: Learn how to set up the Yumma CSS CLI.
Colors: Learn how to use colors in Yumma CSS.