Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Angular with Yumma CSS

Integrate Yumma CSS into Angular applications.

Creating a new project

To create a new Angular project, you need to have the Angular CLI installed on your machine.

  1. Install Yumma CSS

    Install yummacss using a package manager.

    Terminal
    npm i yummacss -D

  2. Initialize configuration

    Create a configuration file in your project.

    Terminal
    npx yummacss init

  3. Set up configuration

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

    yumma.config.js
    module.exports = {
        source: ["./src/**/*.{html,ts}"],
        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
    npx yummacss build

  5. Done!

    You’re all set to start using Yumma CSS utility classes in your project.

    app.component.html
    <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
        <h1 class="fs-3xl fw-500">Yumma CSS ⚙️ Angular</h1>
    </div>
    

    <router-outlet />

Clone this project

Skip the guide steps entirely with our Angular starter.

Cloning the project...
git clone https://github.com/yumma-lib/with-angular.git