Installation

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.

   pnpm

   Terminal

   pnpm add yummacss -D

   npm

   Terminal

   npm i yummacss -D

   yarn

   Terminal

   yarn add yummacss -D

   
   

2. Initialize configuration

   Create a configuration file in your project.

   pnpm

   Terminal

   pnpx yummacss init

   npm

   Terminal

   npx yummacss init

   yarn

   Terminal

   yarn dlx 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.

   pnpm

   Terminal

   pnpx yummacss build

   npm

   Terminal

   npx yummacss build

   yarn

   Terminal

   yarn dlx yummacss build

Framework guides

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

Angular

Astro

Next.js

Nuxt.js

Qwik

Preact

React

Solid.js

Svelte

Vue.js

Next steps

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

Styling elements: Learn how to style elements and styling patterns in “Styling elements”.

Conditional styles: Discover how to apply styles conditionally in “Conditional styles”.

Building styles: Understand the build process and commands in “Building styles”.

Production mode: Optimize your CSS for production in “Production mode”.

Color system: Explore the comprehensive color system in “Color system”.