Windi CSS

Windi CSS is a utility-first CSS framework that provides utility classes to build designs directly in your markup. It scans your source code and generates only the CSS you need, resulting in fast load times and small bundle sizes.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "markup",
    "markup": {
      "language": "html",
      "content": "<div class=\"flex items-center justify-center h-screen bg-gray-100\">\n  <h1 class=\"text-4xl font-bold text-blue-500\">Hello, Windi CSS!</h1>\n</div>\n"
    },
    "processors": [
      "windicss"
    ]
  };
</script>

Usage

Windi CSS is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

Once enabled, all Windi CSS utility classes are available immediately in your markup.

Run in LiveCodes

Usage with JSX and Framework SFCs

Windi CSS can detect class names added in JSX and framework SFCs such as React, Vue, and Svelte. Make sure the Windi CSS processor is enabled.

Processor Info

Name

windicss

Editor

style

Compiler

Windi CSS official compiler, running client-side in the browser. The compiler generates styles on-demand, so only the classes used in your markup are included in the output.

Version

windicss: v3.5.6

Custom Settings

Custom settings added to the property windicss are passed as configuration to Windi CSS. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "windicss": {
    "attributify": true
  }
}

Starter Template

https://livecodes.io/?template=windicss

Links

• Windi CSS
• Windi CSS on GitHub
• CSS Processors in LiveCodes
• Tailwind CSS
• UnoCSS