Installation

Installation guide

1. Install Yumma CSS

   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.mjs

   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

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 pseudo-classes 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.