Astro with Yumma CSS

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.

   npm

   Installing dependencies...

   npm i yummacss -D

   pnpm

   Installing dependencies...

   pnpm add yummacss -D

   yarn

   Installing dependencies...

   yarn add yummacss -D

   
   

2. Initialize configuration

   Create a configuration file in your project.

   npm

   Terminal

   npx yummacss init

   pnpm

   Terminal

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

   npm

   Terminal

   npx yummacss build

   pnpm

   Terminal

   pnpx yummacss build

   yarn

   Terminal

   yarn dlx 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