Integración de Astro

La integración de UnoCSS para Astro: @unocss/astro. Consulta el ejemplo.

Instalación

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(),
  ],
})

Crea un archivo uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opciones de UnoCSS
})

Reset de Estilos

Por defecto, el reset de estilos del navegador no se inyectará. Para habilitarlo, instala el paquete @unocss/reset:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

Y actualiza tu astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // o una ruta al archivo de reset
    }),
  ],
})

Uso sin presets

Este plugin no viene con ningún preset por defecto.

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

bun

bun add -D @unocss/astro

import UnoCSS from '@unocss/astro'

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

Para más detalles, consulta el plugin de Vite.

INFO

Si estás construyendo un meta framework sobre UnoCSS, consulta este archivo para un ejemplo de cómo vincular los presets por defecto.

Notas

Los componentes client:only deben colocarse en la carpeta components o agregarse a la configuración content de UnoCSS para ser procesados.