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.

npx yummacss init

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

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.

export default {
  source: ["./src/**/*.html"],
};

Output

Specifies the output path for the compiled CSS file.

export default {
  output: "./src/styles.css",
};

Reset

Determines whether to include base styles.

export default {
  buildOptions: {
    reset: true, // default: true
  },
};

Minify

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

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 bw-1 bc-silver-4">
  Button
</button>

CSS Output

Running the build or watch command generates the following CSS:

h1 {
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: 1 rem;
  font-weight: 600;
}

.my-2 {
  margin-top: 0.5 rem;
  margin-bottom: 0.5 rem;
}

.fs-xl {
  font-size: 1.25 rem;
}

.ta-c {
  text-align: center;
}

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