Use the UnoCSS framework to create the CSS styles.

Options See on

options object

Configurations for UnoCSS.


"\npresets: [presetUno()]\n"
cssFile boolean string

Set the css filename for all generated styles, Set to false to insert a style tag per page.

transformers object[]

Process CSS files using UnoCSS transformers.

reset boolean tailwind tailwind-compat eric-meyer

Supported CSS reset options.




This plugin allows using the UnoCSS utility-first CSS framework, compatible with Tailwind and Windi CSS.

It analyzes the HTML code of the pages, searching for UnoCSS classes and generating the CSS code needed. It also processes the .css files to apply the directives transformer and variant group transformer.

layout: layout.vto
<h1 class="bg-purple-500">Hello world</h1>

The generated CSS code is output to the unocss.css file. You can customize the filename with the cssFile option, or set false to inline the code in the HTML pages using <style> elements.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import unocss from "lume/plugins/unocss.ts";

const site = lume();

site.use(unocss(/* Options */));

export default site;


This plugin accepts a configuration object with the available options:

options : Configuration object for UnoCSS to define themes, shortcuts, etc. See the UnoCSS docs for more info

cssFile : Set the name of the file to export the CSS code or false to insert the CSS code a <style> tag for each page.

transformers : An array with all transformers to apply to the CSS files. By default loads variantGroup and directives. Set an empty array to disable this feature. See the UnoCSS docs for more info

reset : To apply a reset file. See the UnoCSS docs for more info. By default it's disabled.