Configuration

Install the CLI

Yumma CSS includes the Yumma CLI, a powerful tool for generating production-ready styles.

pnpm add yummacss -D

Create your configuration file

Initialize a configuration file in your project.

pnpx yummacss init

This creates a yumma.config.mjs file at your project root.

/** @type {import('@yummacss/nitro').Config} */
export default {
  source: [""],
  output: "",
  buildOptions: {
    reset: true,
    minify: false,
  },
};

Source

A collection of paths for your template files (e.g., .js, .tsx, .html). The CLI scans these files for utilities to include in the final CSS file.

/** @type {import('@yummacss/nitro').Config} */
export default {
  source: ["./src/**/*.html"],
};

Output

Specifies the output path for the compiled CSS file.

/** @type {import('@yummacss/nitro').Config} */
export default {
  output: "./src/styles.css",
};

Reset

Determines whether to include base styles.

/** @type {import('@yummacss/nitro').Config} */
export default {
  buildOptions: {
    reset: true, // default: true
  },
};

Minify

Determines whether to minify compiled CSS files. Enable this for production builds to reduce file size.

/** @type {import('@yummacss/nitro').Config} */
export default {
  buildOptions: {
    minify: true, // default: false
  },
};

Generate styles

The CLI scans files specified in source & generates a CSS file based on the utilities used.

HTML Input

<button class="bg-white c-black bw-1">
  Button
</button>

CSS Output

Running the build or watch command generates the following CSS:

.bg-white {
  background-color: #fff;
}

.bw-1 {
  border-width: 1px;
}

.c-black {
  color: #000;
}

CLI commands

The Yumma CSS CLI provides commands to manage your project.

Build

Compile your Yumma CSS files once.

npx yummacss build

Watch

Watch for file changes & recompile automatically.

npx yummacss watch