Add Yumma CSS in Astro

1. Install Yumma CSS:

   Install the Yumma CSS Library using a package manager.

   Installing dependencies...

   npm i yummacss@latest

2. Add yummacss in your Layout.astro file:

   layouts/Layout.astro

   <style is:global>
   
   /* Minified Version */
   @import "/node_modules/yummacss/dist/yumma.min.css";
   </style>

3. Getting ready for development:

   Start your application using npm run dev.

   Terminal

   npm run dev

4. Use Yumma CSS in your project:

   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="h-1/1 ins">
           <h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Astro</h1>
       </div>
   </Layout>

---

Still stuck?

If you’re having trouble with Yumma CSS, clone this Astro example.

Cloning repository...

git clone https://github.com/yumma-lib/astro-yummacss-example.git