AstroJS Installation

UnoCSS

UnoCSS v0.64.0, v65.4.0 or later

AstroJS

V5 or later

Installation

1. Create new Astro Project

   Create a new astroJS project if you don’t have one
   Shell

   npm create astro@latest myapp
   cd myapp
   npm i

2. Installation

   Shell

   npm i -D unocss @unifydev/preset-ui

   To learn more about installing UnoCSS and PresetUI, check this guide

3. Configuration

   • Theme : to configure your theme, follow this
   • Global : global general colors for background, text-color and border.
   CSS Variables
   :root{
       --bg: var(--c-white);
       --bg-subtle: var(--c-gray-50);
       --bg-surface: var(--c-gray-100);
       --bg-muted: var(--c-gray-200);
       --bg-surface-elevated: var(--c-gray-300);
   
       --fg: var(--c-gray-700);
       --fg-muted: var(--c-gray-600);
       --fg-title: var(--c-gray-900);
       --fg-subtitle: var(--c-gray-800);
       --border: var(--c-gray-200);
   
       --border-subtle: var(--c-gray-50);
       --border-light: var(--c-gray-200);
       --border-strong: var(--c-gray-300);
       --border-emphasis: var(--c-gray-400);
   }

   **Add Integration **
   
   import unoCSS from "unocss/astro";
   
   export default defineConfig({
     integrations: [ 
       unoCSS({  injectReset: true }) 
     ],
   })

4. Add interactivity (Optional)

   If you’re willing to use interactive component then make sure to have Flexilla installed or the corresponding Flexilla Package
   Shell

   npm i @flexilla/flexilla

   To init all components
   script.js

   import {initFlexilla} from "@flexilla/flexilla"
   
   initFlexilla()