Astro Integration
The UnoCSS integration for Astro: @unocss/astro. Check the example.
Installation
bash
pnpm add -D unocssbash
yarn add -D unocssbash
npm install -D unocssts
// 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
});Style Reset
By default, browser style reset will not be injected. To enable it, install the @unocss/reset package:
bash
pnpm add -D @unocss/resetbash
yarn add -D @unocss/resetbash
npm 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
})
]
});Usage without presets
This plugin does not come with any default presets.
bash
pnpm add -D @unocss/astrobash
yarn add -D @unocss/astrobash
npm install -D @unocss/astrots
// 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.
Contributors
why