Astro Integratie

De UnoCSS integratie voor Astro: @unocss/astro. Bekijk het voorbeeld.

Installatie

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

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

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

Maak een uno.config.ts bestand:

import { defineConfig } from 'unocss'

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

Stijl Reset

Standaard zal browser stijl reset niet worden geïnjecteerd. Om het in te schakelen, installeer het @unocss/reset pakket:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

En importeer het in je main entry:

import '@unocss/reset/tailwind.css'
import 'virtual:uno.css'

Opties

injectReset

Of de reset styles moeten worden geïnjecteerd. Standaard false.

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

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

Dit zal automatisch @unocss/reset/tailwind.css injecteren.