<p align="center" style="background-color: #FFFF99; padding: 15px; border-radius: 5px;">
<strong>⚠️ Windi CSS is Sunsetting ⚠️</strong><br>
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the <a href="https://windicss.org/posts/sunsetting.html">full blog post</a>.
</p>
<hr>
<h1 align="center">
<a href="https://github.com/windicss/windicss/wiki">
<img src="https://next.windicss.org/assets/logo.svg" alt="Windi CSS Logo" height="120" width="120"/><br>
</a>
Windi CSS
</h1>
<p align="center">
<a href="https://www.npmjs.com/package/windicss"><img src="https://img.shields.io/npm/v/windicss.svg?color=0EA5E9" alt="Npm Version"></a>
<a href="https://www.npmjs.com/package/windicss"><img src="https://img.shields.io/npm/dt/windicss.svg?color=1388bd" alt="Total Downloads"></a>
<a href="https://github.com/windicss/windicss/actions"><img src="https://img.shields.io/github/workflow/status/windicss/windicss/Node.js%20CI" alt="Build Status"></a>
<a href="https://codecov.io/gh/windicss/windicss"><img src="https://img.shields.io/codecov/c/github/windicss/windicss/dev.svg?sanitize=true" alt="Coverage"></a>
<br>
<a href="https://discord.gg/aRYWm8r8Eq"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord&logoColor=white&label=&color=7289da" alt="Discord Chat"></a>
<br>
</p>
<p align="center">Next generation utility-first CSS framework.</p>
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
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.
Integrations
Windi CSS provides first-class integrations for your favorite tools, select yours and get started.
| Frameworks | Package | Version |
| :-- | :-- | :-- |
| CLI | Built-in | 
|
| VSCode Extension | windicss-intellisense | 
|
| Vite | vite-plugin-windicss | 
|
| Rollup | rollup-plugin-windicss | 
|
| Webpack | windicss-webpack-plugin | 
|
| Nuxt | nuxt-windicss | 
|
| Svelte | svelte-windicss-preprocess | 
|
| StencilJS | stencil-windicss<sup>Community</sup> | 
|
Plugins 🛠
Check out plugins available for windicss.
Documentation 📖
Check the documentation website.
Discussions
We’re using GitHub 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 before submitting a pull request.
Sponsors
<a href="https://opencollective.com/windicss" target="_blank">
<img src="https://opencollective.com/windicss/sponsors.svg">
</a>
Backers
<a href="https://opencollective.com/windicss" target="_blank">
<img src="https://opencollective.com/windicss/backers.svg">
</a>
License
Distributed under the MIT License.
