Integração Astro

A integração UnoCSS para Astro: @unocss/astro. Confira o exemplo.

Instalação

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

Crie um arquivo uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opções do UnoCSS
})

Redefinição de Estilo

Por padrão, a redefinição de estilo do navegador não será injetada. Para habilitá-la, instale o pacote @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

E atualize seu astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // ou um caminho para o arquivo de redefinição
    }),
  ],
})

Uso sem presets

Este plugin não vem com nenhum preset padrão.

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 mais detalhes, consulte o plugin Vite.

INFO

Se você estiver construindo um meta framework sobre o UnoCSS, consulte este arquivo para um exemplo de como vincular os presets padrão.

Notas

Componentes client:only devem ser colocados na pasta components ou adicionados à configuração content do UnoCSS para serem processados.