UnoCSS

Options See on deno.land

options object

Configurations for UnoCSS.

See https://unocss.dev/guide/config-file

Default:

"\npresets: [presetUno()]\n"

cssFile boolean string

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

Default:

"unocss.css"

transformers object[]

Process CSS files using UnoCSS transformers.

Default:

"["

reset boolean tailwind tailwind-compat eric-meyer

Supported CSS reset options.

See https://github.com/unocss/unocss/tree/main/packages/reset

Default:

false

Description

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>
</style>

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

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.

Installation

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;

Configuration

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.