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.
-
Install Yumma CSS
Install
yummacss
using a package manager.Installing dependencies... npm i yummacss -DInstalling dependencies... pnpm add yummacss -DInstalling dependencies... yarn add yummacss -D
-
Initialize configuration
Create a configuration file in your project.
Terminal npx yummacss initTerminal pnpx yummacss initTerminal yarn dlx yummacss init -
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,}}; -
Build styles
You can now start generating your CSS with the
build
orwatch
command.Terminal npx yummacss buildTerminal pnpx yummacss buildTerminal yarn dlx yummacss build -
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.
git clone https://github.com/yumma-lib/with-astro.git