Skip to content

Astro with Yumma CSS

Setting up Yumma CSS in an Astro project.

Creating a new project

To create a new Astro project, you need run the Astro CLI Wizard in your terminal.

  1. Install Yumma CSS

    Install yummacss using a package manager.

    Installing dependencies...
    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
    export default {
    source: ["./src/**/*.{html,astro}"],
    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.

    pages/index.astro
    ---
    import Layout from '../layouts/Layout.astro';
    ---
    <Layout title="Welcome to Astro.">
    <div class="bg-indigo-12 d-g h-dvh pi-c tc-white">
    <h1 class="fs-3xl fw-500">Yumma CSS โš™๏ธ Astro</h1>
    </div>
    </Layout>

Clone this project

Skip the guide steps entirely with our Astro starter.

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