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

pnpm

pnpm add -D unocss rollup

yarn

yarn add -D unocss rollup

npm

npm install -D unocss rollup

bun

bun add -D unocss rollup

Replace rollup with rolldown when you use Rolldown.

Rollup

rollup.config.ts

import UnoCSS from 'unocss/rollup'

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

Rolldown

rolldown.config.ts

import UnoCSS from 'unocss/rolldown'

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

Import uno.css from an entry module:

src/main.ts

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:

uno.config.ts

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
})