Rollup and Rolldown Plugin

Use UnoCSS with Rollup or Rolldown without Vite. The plugin supports the global mode and emits a CSS asset when you import uno.css from an entry module.

Installation

::: code-group

pnpm add -D unocss rollup

yarn add -D unocss rollup

npm install -D unocss rollup

bun add -D unocss rollup

:::

Replace rollup with rolldown when you use Rolldown.

Rollup

import UnoCSS from 'unocss/rollup'

export default {
  input: 'src/main.ts',
  plugins: [
    UnoCSS(),
  ],
}

Rolldown

import UnoCSS from 'unocss/rolldown'

export default {
  input: 'src/main.ts',
  plugins: [
    UnoCSS(),
  ],
}

Import uno.css from an entry module:

import 'uno.css'

The plugin emits generated CSS as an output asset. Include that asset in your application with your deployment or HTML pipeline.

Configuration

Create a uno.config.ts file:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

You can also pass the configuration to the plugin directly:

import UnoCSS from 'unocss/rollup'

UnoCSS({
  // ...UnoCSS options
})