UnoCSSAstro Integration
The UnoCSS integration for Astro: @unocss/astro. Check the example.
Installation
bash
pnpm add -D unocsspnpm add -D unocssbash
yarn add -D unocssyarn add -D unocssbash
npm install -D unocssnpm install -D unocssts
// 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/resetpnpm add -D @unocss/resetbash
yarn add -D @unocss/resetyarn add -D @unocss/resetbash
npm install -D @unocss/resetnpm install -D @unocss/resetAnd 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/astropnpm add -D @unocss/astrobash
yarn add -D @unocss/astroyarn add -D @unocss/astrobash
npm install -D @unocss/astronpm install -D @unocss/astrots
// 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.