docs/integrations/astro.md
The UnoCSS integration for Astro: @unocss/astro. Check the example.
::: code-group
pnpm add -D unocss @unocss/astro
yarn add -D unocss @unocss/astro
npm install -D unocss @unocss/astro
bun add -D unocss @unocss/astro
:::
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [
UnoCSS(),
],
})
Create a uno.config.ts file:
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})
By default, browser style reset will not be injected. To enable it, install the @unocss/reset package:
::: code-group
pnpm add -D @unocss/reset
yarn add -D @unocss/reset
npm install -D @unocss/reset
bun add -D @unocss/reset
:::
And update your 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
}),
],
})
This plugin does not come with any default presets.
::: code-group
pnpm add -D @unocss/astro
yarn add -D @unocss/astro
npm install -D @unocss/astro
bun add -D @unocss/astro
:::
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. :::
client:only components must be placed in components folder or added to UnoCSS's content config in order to be processed.