Skip to content
On this page

Astro Integration

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

Installation

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

export default defineConfig({
  integrations: [
    UnoCSS(),
  ],
})
// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

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

Create a uno.config.ts file:

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

export default defineConfig({
  // ...UnoCSS options
})
// uno.config.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:

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

And update your astro.config.ts:

ts
// astro.config.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
    }),
  ],
})
// astro.config.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.

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

export default {
  integrations: [
    UnoCSS(),
  ],
}
// astro.config.mjs
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.

Released under the MIT License.