Windi CSS

Options See on deno.land

minify boolean

Whether minify the css code or not

Default:

false

mode interpret compile

Operating mode for Windi CSS.

See https://windicss.org/posts/modes.html

Default:

"interpret"

cssFile string boolean

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

Default:

false

config object

Configurations for the Windi CSS processor

See https://windicss.org/guide/configuration.html

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

Default:

true

Description

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;
}
</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;
}

Installation

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;

Configuration

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.