Windi CSS

Use the Windi framework to create the CSS styles.

Options See on

minify boolean

Whether minify the css code or not

mode interpret compile

Operating mode for Windi CSS.


cssFile string boolean

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

config object

Configurations for the Windi CSS processor


presets object[]
prefixer boolean
attributify boolean object
separator string
important boolean string
darkMode class media boolean
theme object
variantOrder string[]
plugins any[]
handlers object
corePlugins string[] record
prefix string
exclude object[]
alias record
shortcuts record
preflight boolean

To generate and insert preflight styles



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

It analyzes the HTML code of the pages, searching for Windi classes and generating the CSS code needed. It also loads .windi.css files, processes them, and outputs CSS files.

It can also transform Windi code embedded in the HTML using <style lang="windi">...</style> elements.

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

<a href="/" class="btn">Go to home</a>

<style lang="windi">
body {
  @apply bg-red-500 text-white;


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

import lume from "lume/mod.ts";
import windi from "lume/plugins/windi_css.ts";

const site = lume();

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

export default site;


This plugin accepts a configuration object with the available options:

  • config: Configuration object for Windi CSS where you can define themes, shortcuts, plugins, etc. See the Windi docs for more info
  • cssFile: Set the name of the file to export the CSS code. If it's not defined, the CSS is inserted in a <style> tag for each page.
  • minify: Set true to minify the CSS code.
  • mode: It can be "interpret" or "compile". See Interpret vs Compile for more info.