GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • UnoCSS
  • Getting Started
  • Why UnoCSS?
  • Presets
  • Style reset
  • Config file
  • Extracting & Safelist
  • Overview
  • Vite
  • Nuxt
  • Next
  • Astro
  • Svelte Scoped
  • Webpack

This view

  • Original page
  • New address

GeezerVison is showing unocss.dev — UnoCSS Astro Integration

Astro Integration ​

The UnoCSS integration for Astro: @unocss/astro. Check the example.

Installation ​

pnpmyarnnpmbun
bash
pnpm add -D unocss @unocss/astro
bash
yarn add -D unocss @unocss/astro
bash
npm install -D unocss @unocss/astro
bash
bun add -D unocss @unocss/astro
astro.config.ts
ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS(),
  ],
})

Create a uno.config.ts file:

uno.config.ts
ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Style Reset ​

By default, browser style reset will not be injected. To enable it, install the @unocss/reset package:

pnpmyarnnpmbun
bash
pnpm add -D @unocss/reset
bash
yarn add -D @unocss/reset
bash
npm install -D @unocss/reset
bash
bun add -D @unocss/reset

And update your astro.config.ts:

astro.config.ts
ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // or a path to the reset file
    }),
  ],
})

Usage without presets ​

This plugin does not come with any default presets.

pnpmyarnnpmbun
bash
pnpm add -D @unocss/astro
bash
yarn add -D @unocss/astro
bash
npm install -D @unocss/astro
bash
bun add -D @unocss/astro
astro.config.mjs
ts
import UnoCSS from '@unocss/astro'

export default {
  integrations: [
    UnoCSS(),
  ],
}

For more details, please refer to the Vite plugin.

INFO

If you are building a meta framework on top of UnoCSS, see this file for an example on how to bind the default presets.

Notes ​

client:only components must be placed in components folder or added to UnoCSS's content config in order to be processed.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.