---
name: windicss
summary: "Windi CSS is a utility-first CSS framework that generates styles on demand by scanning your HTML/CSS, offering Tailwind-compatible utilities with faster build times and HMR. The project has been officially sunset and is no longer recommended for new projects."
language: TypeScript
license: MIT
repo: https://github.com/windicss/windicss
source: https://opensources.dev/resource/windicss
health: 56
---

# windicss

Windi CSS is a utility-first CSS framework that generates styles on demand by scanning your HTML/CSS, offering Tailwind-compatible utilities with faster build times and HMR. The project has been officially sunset and is no longer recommended for new projects.

## Why Windi CSS? 🤔

A quote from the author should illustrate his motivation to create Windi CSS:

> When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - [@voorjaar](https://github.com/voorjaar)

By scanning your HTML and CSS and generating utilities on demand, Windi CSS is able to provide faster load times and a speedy HMR in development, and does not require purging in production.

Read more about it in the [Introduction](https://windicss.org/guide/).

## Integrations

Windi CSS provides first-class integrations for your favorite tools, select yours and get started.

FrameworksPackageVersionCLI[Built-in](https://windicss.org/guide/cli)![](https://img.shields.io/npm/v/windicss?label=&color=0EA5E9)VSCode Extension[windicss-intellisense](https://github.com/windicss/windicss-intellisense)![](https://img.shields.io/visual-studio-marketplace/v/voorjaar.windicss-intellisense.svg?label=&color=1388bd)Vite[vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss)![](https://img.shields.io/npm/v/vite-plugin-windicss?label=&color=0EA5E9)Rollup[rollup-plugin-windicss](https://github.com/windicss/vite-plugin-windicss/tree/main/packages/rollup-plugin-windicss)![](https://img.shields.io/npm/v/rollup-plugin-windicss?label=&color=1388bd)Webpack[windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin)![](https://img.shields.io/npm/v/windicss-webpack-plugin?label=&color=1388bd)Nuxt[nuxt-windicss](https://github.com/windicss/nuxt-windicss-module)![](https://img.shields.io/npm/v/nuxt-windicss?label=&color=1388bd)Svelte[svelte-windicss-preprocess](https://github.com/windicss/svelte-windicss-preprocess)![](https://img.shields.io/npm/v/svelte-windicss-preprocess?label=&color=1388bd)StencilJS[stencil-windicss](https://github.com/codeperate/stencil-windicss)Community![](https://img.shields.io/npm/v/@codeperate/stencil-windicss?label=&color=1388bd)

## Plugins 🛠

Check out [plugins available for windicss](https://github.com/windicss/plugins).

## Documentation 📖

Check the documentation website.

## Discussions

We’re using [GitHub Discussions](https://github.com/windicss/windicss/discussions) as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself.

## Contributing

If you're interested in contributing to windicss, please read our [contributing docs](https://github.com/windicss/windicss/blob/main/CONTRIBUTING.md) **before submitting a pull request**.

## Sponsors

## Backers

## License

Distributed under the [MIT License](https://github.com/windicss/windicss/blob/main/LICENSE).